포럼

 

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

 

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

 

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

 

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

 

반대로 너무 크면 사이트 레이아웃에 따라 스크롤이 변하여 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! - 이 방법으로 연구중

 

 

 

 

 

 

글쓴이 제목 최종 글
뮤르시엘라고 공동구매같은건 어떻게 만드는게 좋을까요? [1] 2014.05.16 by oscarmike
이즈야 풀리퀘 할 때는 브랜치를 따로 만드세요. [3] 2014.05.16 by 이즈야
LI-NA 그냥 심심해서 구매해봤습니다. [9] 2014.05.16 by 라디오스테이션
또별 스펨 가입방법이 자동 정상 가입되나봅니다. [7] 2014.05.15 by 또별
큰돌♡ 작성 댓글 보기 모듈 수정 및 스케치북 스킨 (5/15 17:52 수정) [5] file 2014.05.15 by 큰돌♡
업글 텍스타일도 이제 개발이 들어가는것 같네요. [7] 2014.05.15 by Novelic
CoffeeMix 모바일 브라우저 뭐가 좋나요? [1] 2014.05.15 by oscarmike
XE 프로모션회원 선정 대상 게시판 변경 [8] 2014.05.15 by 혼마_메이코
Double'U' 웹페이지 인쇄시 플래시와 관련하여 [6] 2014.05.15 by Double'U'
큰돌♡ 코드하이라이터 자동 미리보기 추가 [2] file 2020.03.14 by 혼마_메이코
YJSoft 풀 리퀘스트시 확인할것 (1) - Travis CI [1] file 2014.05.14 by 도라미
애니즌 사이트 메뉴 방식으로 바뀌면서 불편한 점.. [2] 2014.05.14 by #혼마 메이코
이즈야 updateModule 이거 좀 짜증나네요... [4] 2014.05.14 by 이즈야
lililiillililiil cloudflare 쓰시는 분들 계신가요? [20] 2014.05.14 by 컴포지트
mAKEkr 1.7.5가 이번주 내로 배포될것같네요 [16] 2014.05.14 by 매력적인분석
blo 모바일에서 글/댓글 등록 문제로 고민하는 분들 계신가요? [9] 2014.05.14 by 휘즈
빽짱구 글과댓글 등록시 속도  
oscarmike 홈페이지 운영자라면 팁게시판을 주욱 읽어보세요!  
애니즌 image_lazyload 애드온 수정기. [21] 2014.05.13 by 애니즌
mAKEkr 몰랐는데.. 스킨에서도 그냥 일반 PHP파일을 불러올 수 있네요?? [4] 2014.05.13 by 독도2005