지연로드를 사용하여 이미지 로딩

Question

나는이 플러그인을 http://www.appelsiini.net/projects/lazyload 이미지를로드하는 데 사용했습니다.

페이지를 아래로 스크롤하면 이미지가로드되지만 페이지가로드 될 때 첫 번째 행 이미지를 표시해야합니다.

어떻게하면됩니까?

Answer 1

기본적으로 이미지는 화면에 표시 될 때로드됩니다. 이미지를 더 빨리로드하려면 임계 값 매개 변수를 설정할 수 있습니다. 임계 값을 200으로 설정하면 이미지가 표시되기 전에 이미지가 200 픽셀로드됩니다.

$("img.lazy").lazyload({ threshold : 200 }); 

페이지에서 첫 번째 행까지의 거리가 어느 정도입니까?

$(function() { 
    var $firstRow = $('table:first tr:first'), 
    threshold = $firstRow.offset().top + $firstRow.height(); 
    $("img.lazy").lazyload({ threshold : threshold }); 
}); 

등등. 웹 사이트 데모 페이지에 실행에

Answer 2

는 부하가이 DEMO

$(function() { 
      $("img").lazyload({ 
       effect : "fadeIn", 
       /* 
       appear : function(elements_left, settings) { 
        console.log("appear"); 
        console.log(elements_left); 
        //console.log(this, elements_left, settings); 
       }, 
       load : function(elements_left, settings) { 
        console.log("load"); 
        console.log(elements_left); 
        //console.log(this, elements_left, settings); 
       } 
       */ 
      }); 
     });​ 

Answer 3

이미지가 누락 된 너비와 높이 속성을 볼 수있다 페이지와 첫 번째 행을 표시합니다. 게으른로드는 제대로 작동하지 않습니다. document.ready 이벤트가 발생하면 브라우저는 너비와 높이를 모르고 레이아웃에서 이미지가 있어야하는 위치를 알 수 없습니다. 적절한 이미지 태그는 다음과 같습니다.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">