기존 애드온에 상당한 문제가 있었음...

이미지 크기를 지정하지 않을 경우라던가..

더미 이미지 크기를 그대로 불러오는 문제가 발생.

더미 이미지 크기가 원본 이미지보다 작으면 한번에 여러 이미지가 로드되고....

반대로 너무 크면 사이트 레이아웃에 따라 스크롤이 변하여 footer가 밀려있거나

브라우저가 멍청이(..)이 되는 경우가 있음.

따라서 기존 배포중인 애드온의 배포를 중지하고...

방치하다가.. 잠깐 짬이나서 다시 도전..!

첫번째. 이미지 원본 크기 구하기

getImageSize() 함수를 이용하여 원본 이미지 크기를 구함.

두번째. 원본 크기를 이미지태그에 자동 기입하는 작업.

str_replace()로 쉽게 처리.

그리고 결과 확인.!

어...어...어...?! 어째서 더미의 원본크기(100*100)이 되는 거지?

원인을 파악하기 시작함.

정답은 prettyphoto 애드온이 이미지 리사이즈를 할 때 해당 이미지의 원본크기로 변환해버림!

더미 이미지 파일 크기는 100*100이니까 이미지 크기가 100*100으로 되어서

한 페이지를 보면 모든 이미지가 로드되어버림..ㄷㄷ

그래서.. 해당 애드온을 사용안하기로...-_-;;;

근데.. 이렇게 해도 문제가 해결되지 않음!

그 이유는 가로 사이즈야 xe_content 기준으로 리사이즈가 되는데

height 값이 변경되지 않는.. 즉 원본이미지가 1920*1080 이고 화면 가시영역(xe_content 가로)가 1000px 이면

해당 더미이미지크기가

1000*1080이 되어버림.....

이 부분은 jquery로 처리해보기로 함...

해당 이미지를 each로 불러와서

다음과 같은 스크립트로 비율은 구한 후 가로 세로 사이즈 크기를 재정의함.

   //image resize

   //이미지 크기를 구해옴
   var sw =  $(this).attr('width');
    sh =$(this).attr('height');

   // xe_content 가로 사이즈를 구함
   var mother = $('.xe_content').width();

   // 이미지 크기가 가로사이즈랑 같거나 크면~ 크기값 구함

   if(mother <= sw){

    //가로값이 리사이즈된 퍼센트 구함
    var percent = mother / sw;

    //가로 비율에 맞게 높이값 구함
    var heights = sh * percent;

    // 각각 사이즈를 재정의해줌

    $(this).width(mother);
    $(this).height(heights);

   } 

그리고 확인!

오..! ready()로 호출해서 약간의 딜레이는 느껴지지만 크게 문제 없음!

변경된 애드온 테스트는 (더미 이미지의 크기는 100*100 입니다.)

http://anizen.kr/image_lazyload/129147

여기서..

자료는 최종적으로 확인 후 업로드 예정. (아직은 회사이기 때문에..^^)

* 예상치 못한 버그가 있을 수 있음.

* 예상되는 버그..는 getImageSize() 사용시 http://~ 같은 경우 php.ini 설정에서 allow_url_fopen값이 off되어 있으면 작동안함. (에러뿜음) 그래서 우선은 일단 사이트 도메인 기준으로 동일하면 상대경로로 변경함

* 화면보다 작은 이미지는? (확인해보지 않음 - 다만 문제는 없을 것으로...)

* prettyphoto 애드온이 매력적이지만 이미지 원본 기준으로 사이즈를 리사이즈하기 때문에 사용이 불가능할 것으로...

* 하지만 최종적으로는 이미지를 삽입할 때 크기를 자동으로 입력하게 하는 방향이 가장 BEST! - 이 방법으로 연구중