포럼

 

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

 

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

 

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

 

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

 

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

 

 

 

 

 

 

글쓴이 제목 최종 글
빽짱구 글과댓글 등록시 속도  
oscarmike 홈페이지 운영자라면 팁게시판을 주욱 읽어보세요!  
애니즌 image_lazyload 애드온 수정기. [21] 2014.05.13 by 애니즌
mAKEkr 몰랐는데.. 스킨에서도 그냥 일반 PHP파일을 불러올 수 있네요?? [4] 2014.05.13 by 독도2005
orangehome XE 비지니스 라이센스 정책 [6] 2014.05.13 by ibin
AJKJ 간단한 스팸방지 애드온 아이디어 및 배포 [14] file 2014.05.13 by prologos
가르송 누리고!!! 디자인 센터가 만들어지면 참 좋을듯하네요 ^^ [3] 2014.05.12 by 여우별다솜
KANTSOFT 프로그래머에게 필요한 5가지 덕목 [4] 2014.05.12 by KrteamENT
Novelic 게시판 모듈인데 wiki 모듈의 act가 쓰이네요 [3] 2014.11.14 by teguh100
이즈야 트리거 개념 적용하는 거 재미있네요.  
모얼더 스팸 테러의 목적이 뭘까요? [8] 2014.05.11 by Luatic™
foret 개인 사이트 용량으로 고민하시는 분들.. ㅎㅎ [6] 2014.05.11 by foret
EnterTM 디시인사이드와 같은 차단기능을 도입해야 되지 않을까 생각이 되네요. [3] 2014.05.10 by qwms
XE힘들당휴 현재 소셜XE는 mysqli DB환경을 사용할 시 문제가 있습니다. [13] file 2014.05.10 by 시기
도라미 공홈 메뉴가 영어로 바뀌었네요. [22] 2014.05.10 by 도라미
jango848 이미지 파일 업로드하면 깨지는데 왜그럴까요??ㅠㅠ [1] 2014.05.10 by teguh100
푸하라 캡챠 지데루 뚤렸네요.... [21] 2014.05.10 by 독도2005
푸하라 캡차가 뚤린것이 아니라 보안에 구멍이 생긴듯 하네요... [13] 2014.05.10 by GG
pezex 스팸 공격에 대해서 [2] 2014.05.10 by GG
Omega3 XE 공홈에 안 들어온지 약 1달이 되었는데... [2] 2014.05.10 by Omega3