lazy load

<script src="jquery.js"></script>

<script src="jquery.lazyload.js"></script>

 

https://appelsiini.net/projects/lazyload/v1/

 

 

 

사용하는 방법?

HTML 코드 끝에 둘 다 포함하십시오.

<script src="jquery.js"></script>

<script src="jquery.lazyload.js"></script>

 

이미지 태그를 변경해야합니다. 이미지의 주소는 data-original속성에 넣어야 합니다. 지연로드 된 이미지에 특정 클래스를 제공하십시오. 이렇게하면 어떤 이미지 플러그인이 바인딩되는지 쉽게 제어 할 수 있습니다.

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

 

$(function() {

      $("img.lazy").lazyload();

});

 

프로 팁! 이미지 크기를 속성 width및 height속성 또는 CSS 로 설정해야합니다 . 그렇지 않으면 플러그인이 제대로 작동하지 않을 수 있습니다.

임계 값 설정

//기본적으로 이미지는 화면에 나타날 때로드됩니다. 

이미지를 더 일찍로드하려면 threshold매개 변수를 사용하십시오 . 

임계 값을 200으로 설정하면 이미지가 뷰포트에 나타나기 전에 200 픽셀을로드합니다.

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

로딩을 트리거하는 이벤트

//click또는 과 같은 jQuery 이벤트를 사용할 수 있습니다

기본값은 사용자가 아래로 스크롤하여 이미지가 뷰포트에 나타날 때까지 기다리는 것입니다. 

사용자가 이미지를 클릭 할 때만 이미지를로드하려면 다음을 수행하십시오.

$("img.lazy").lazyload({ event : "click" });

 

프로 팁! 지연된 이미지 로딩과 같은 트릭에 사용할 수 있습니다. 다음 코드는 이미지를로드하기 전에 나머지 페이지로드가 완료된 후 5 초 동안 기다립니다.

.$(function() { $("img.lazy").lazyload({ event : "sporty" }); });

 

$(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000); });

효과 사용

//기본적으로 플러그인은 이미지가 완전히로드되기를 기다립니다 show().

$("img.lazy").lazyload({ effect : "fadeIn" });

자바 스크립트가 아닌 브라우저의 대체

//JavaScript 이외의 사용자를 지원하려면 <noscript></noscript>블록 안에 실제 이미지 태그를 포함시킬 수 있습니다 .

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

<noscript> <img src="img/example.jpg" width="640" heigh="480"> </noscript>

 

//자리 표시 자와 실제 이미지가 동시에 표시되지 않도록하려면 자리 표시자를 CSS로 숨 깁니다.

.lazy { display: none; }

 

//JavaScript 지원 브라우저의 경우 문서가로드 될 때 자리 표시자를 표시해야합니다. 플러그인을 초기화 할 때 동시에 수행 할 수 있습니다.

$("img.lazy").show().lazyload();

 

머리 위로! 이 모든 옵션은 JavaScript 이외의 사용자를 지원하려는 경우에만 수행해야합니다.

컨테이너 내부 이미지

//스크롤 막대가있는 div와 같이 스크롤 컨테이너 내의 이미지에 플러그인을 사용할 수도 있습니다.

 컨테이너를 jQuery 객체로 전달하십시오.

#container { height: 600px; overflow: scroll; }

$("img.lazy").lazyload({ container: $("#container") });

이미지가 순차적이지 않은 경우

//스크롤 후 페이지 플러그인이 언로드 된 이미지를 통해 루프됩니다. 루프는 이미지가 보이는지 확인합니다. 뷰포트 외부의 첫 번째 이미지가 발견되면 기본적으로 루프가 중지됩니다. 이것은 다음과 같은 가정을 기반으로합니다. 페이지의 이미지 순서는 HTML 코드의 이미지 순서와 동일합니다. 일부 레이아웃 가정에서는 이것이 잘못되었을 수 있습니다. failure_limit설정으로 로딩 동작을 제어 할 수 있습니다 .

$("img.lazy").lazyload({ failure_limit : 10 });

 

 

 

=====================

Replace SRC attribute with data-original

<img class="lazy" src="something.png">   =>  <img class="lazy" data-original="something.png"> =>  

$( 'img.lazy[src]' ).attr('src').replaceWith( 'data-original' );

or

 

$("img.lazy").each(function() {

   $(this).attr("data-original",$(this).attr("src"));

   $(this).removeAttr("src");

});