웹 페이지에 표시되는 내용로드

Question

많은 이미지를 표시해야하는 웹 페이지가 있으므로 페이지가 느리게로드됩니다. Google 이미지와 같은 작업을하고 싶습니다. 보이지 않는 이미지는로드되지 않습니다. 쉽게 할 수있는 방법이 있습니까?

감사합니다.

Answer 1

이미지에 아무 src 속성도 지정하지 말고 expando 속성, 예를 들어 url 만 지정하십시오. 그런 다음보기로 스크롤 할 때 src 속성을 설정할 수 있습니다. 일부 환경에서는 배경 이미지 (Ipad website image performance and memory)를 설정하는 것이 실제로 더 효과적 일 수 있으므로 고려해 볼 가치가 있습니다. 이것은 실제로 테스트 된 코드는 아니지만 꽤 가까이 있어야합니다.

$(function(){ 
    var $images = $("img"); 
    var iNextImageToLoad = 0; 
    $(document).scroll(function(){ 
    for(var i = iNextImageToLoad; i < $images.length; i++){ 
     if($(window).scrollTop() + $(window).height() > $images.eq(i).offset().top){ 
     //image is in view 
     $images[i].attr(src) = $images[i].attr(url); 
     iNextImageToLoad = i+1; 
     } 
    } 

    }); 
});