웹 페이지 이미지 로딩시.. 성능개선 질문합니다.

Question

${stitle1}

HOME > ${stitle1} > ${stitle2}

${stitle2}

최근판매자료

class="last">

${x.MZ_TITLE}

이전으로이동
다음으로이동

인기자료

class="last">

${x.MZ_TITLE}

이전으로이동
다음으로이동

이런 코드로 이미지에 총 3개의 for문이 걸려있습니다. 최신자료, 최근판매자료, 인기자료 이런 식인데요.. 리스트를 뿌리는데에 이미지때문에 로딩이 너무 느립니다.5분이상..로딩중이에요 .. 이미지 크기를 줄이는 방법은..공수가 너무 많이들어서 안됍니다..또한, 다른 방법을 사용하는것도 시간상.. 불가능합니다. 저 코드에서만 해결해줘야하는데.. 로직을 잘못짠건지... 제 수준에서는 잘 모르겠습니다.혹시 이상하거나 의심가는 부분이 있으시다면..조금의 힌트라도 주시면 감사하겠습니다..

우봉이 · Accepted Answer

현재 위 소스 자체는 페이징이 되어있는 소스가 아닌가요?슬라이드 쇼 같은 경우는 뿌려져있는 요소에 대해서 슬라이드 쇼가 이루어지는 것이니까요전체 흐름을 몰라 자세히 알수는 없겠지만 페이지번호를 읽어오고, setPage()라는 함수가 있는 것으로 봐선.. 페이징이 되어있는 소스 같은데요..파라미터만 잘 넘겨서, 데이터만 갯수만큼 받아오면 될 것 같습니다..

한씨 · Answer

크롬에서 개발자모드 들어가시면 어느부분에서 로딩 시간을 많이 잡아먹는지 체크가 가능합니다. 우선 그걸로 보시고 어느부분 수정이 제일 시급하지부터 보시는게 좋지 않을까요?

허허실실 · Answer

이미지 로딩 속도를 향상시키는 방법으로는 img 태그에 image size 지정브라우저 캐쉬를 사용할 수 있도록 설정하는 방법 등이 있을 수 있습니다. 그러나 무엇보다 브라우저 개발자 도구를 통해 어느 부분에서 문제가 발생하는지 부터 확인해보는게 우선입니다.

푸로구래밍 · Answer

넵 답변 감사합니다..그런데 개발자도구로 보면 어느 특정부분이라기보단 네트워크로 볼때 이미지가 계속..로딩됍니다. 몇천건의 이미지를 로딩해요.. .제가 봐야할 부분이 혹시 개발자도구의 네트워크가아니라 다른부분인가요??..

허허실실 · Answer

수천건의 이미지를 한번에 로딩할려면 네트워크 제한으로 인해 속도가 늦린 것은 당연한 현상입니다.지금 필요하신 것은 브라우저에서 보여주는 영역만 로딩되도록 변경하셔야 할 것 같네요.&#34;스크롤 이미지 로딩&#34; 을 검색해보세요.

푸로구래밍 · Answer

허허실실 님 답변 감사합니다.그런 부분들도 검토를 해봤는데.. 퇴짜를 맞았어요. 그래서 실제적으로 방금 답변을 받은 부분이 원래 처음에 보여지는 이미지는 15개정도인데 (한 페이지에)jquery slide에서 처음에 전체데이터를 뿌려주기때문에 느려지는 거라네요.그래서 해결방법으로는 jquery slide에서 슬라이드가 움직일 때 즉, 옆으로 버튼(왼, 오른) 눌렀을 때 그 그 만큼의 이미지를 로딩하도록 수정하라는군요....이게 답을 정하고 물어본게 아니라 제가 해결을 못하니 해결방법이 제시가 돼었어요... &#61;ㅠ

허허실실 · Answer

찾으시는게 &#34;Lazy Load Plugin for jQuery&#34; 인 것 같은데....

푸로구래밍 · Answer

허허실실 ..저도 그런 플러그인을 찾아보고 제안했는데, 짤려버렸네용..ㅎㅎ $(document).ready(function(){ $(&#34;.sellInfo&#34;).slides({ container: 'lifoList', pagination: true, next: 'right-btn1', prev: 'left-btn1', start: 1, effect: 'slide', play : 0, slideSpeed: 350, pause: 0 }); $(&#34;.bestInfo&#34;).slides({ container: 'lifoList', pagination: true, next: 'right-btn2', prev: 'left-btn2', start: 1, effect: 'slide', play : 0, slideSpeed: 350, pause: 0 }); $(&#34;.newInfo&#34;).slides({ container: 'lifoList', pagination: true, next: 'right-btn3', prev: 'left-btn3', start: 1, effect: 'slide', play : 0, slideSpeed: 350, pause: 0 }); var wrap &#61; $('.infoTextList') , pagingNum &#61; wrap.find('.infoPaging').find('.current') , btnPrev &#61; wrap.find('button.prev') , btnNext &#61; wrap.find('button.next') , innerFrame &#61; wrap.find('.innerFrame') , item &#61; innerFrame.find('.list') , dist &#61; wrap.width() , currentIdx &#61; 0 , total &#61; item.length; setPage();이 부분은 위의 본문에 jsp페이지 헤더부분 script인데요 이 부분을 짚어주면서 수정하라고 하시더라구요...오늘 저녁이 기한이라 열심히 고쳐봐야겠네요..사실 페이징에 약해서 걱정입니다. -_-...

urbug2 · Answer

으음. 코드를 뜯어 볼 수 없어. 그냥 훓어 본 정도인데요.이건 로딩하는 이미지가 실제로 많아서 발생하는 지연이 잖아요.그리고 슬라이드를 쓰고 있는 상황이고(&#96;jquery slide'는 종류도 많고 다양해서)이건 슬라이드가 lazy loading을 지원하지 않으면 구현할 수 없습니다.지금의 슬라이드가 이런 기능을 제공하는지 부터 확인하시고,있으면 가이드 따라 수정하시고.없으면 다른 슬라이드를 알아보셔야 겠네요,

urbug2 · Answer

화면에서 페이징을 해준다고 했지. 이미지까지 lazy loading해 준다고는 안 했으니까요.눈으로 확인하고 싶으면 브라우져에서 F12 를 눌러 dom 탐새끼에서 해당 element를 확인하시구요.그러고 보니. 첫 소스에서 이미 모든 이미지를 가져 온 상태네요.

푸로구래밍 · Answer

답변 감사합니다. . 제가 해볼수 있는 방법은 우봉이님이 제시해주신 방법인것 같네요.아마 됄확률이 높을것 같습니다.... lazy loading 은..지원하지 않는걸로 알고있어요.ㅠ 뜯어고칠순 없습니다 시간이.. 정말 없네요. ㄷㄷ..

웹 페이지 이미지 로딩시.. 성능개선 질문합니다.

11개의 답변

#webpage 목록