lozad.js
1.0.0
IntersectionObserver API를 사용하여 이미지, iframes 등의 종속성이없는 순수 JS의 고도로 성능, 가볍고 구성 가능한 Lazy 로더
그리고 더 많은 ...
기존 게으른 로딩 라이브러리는 스크롤 이벤트에 연결되거나주기적인 타이머를 사용하고 게으른로드 해야하는 요소에서 getBoundingClientRect() 호출하십시오. 그러나이 접근법은 getBoundingClientRect() 가 브라우저가 전체 페이지를 다시 레이아웃하도록 강요하고 웹 사이트에 상당한 JANK를 소개함에 따라 각 호출이 고통 스럽습니다.
이것을보다 효율적이고 성능을 발휘하는 것은 교차점을 위해 설계되었으며 Chrome 51에 착륙합니다. 교차점은 관찰 된 요소가 브라우저의 뷰포트에 들어가거나 종료 할 때 알려줍니다.
# You can install lozad with npm
$ npm install --save lozad
# Alternatively you can use Yarn
$ yarn add lozad
# Another option is to use Bower
$ bower install lozad그런 다음 롤업 또는 웹 팩과 같은 모듈 번더를 사용하면 다른 방법으로 사용하십시오.
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require ( 'lozad' ) 또는 CDN을 통해로드하고 페이지의 head 태그에 포함시킵니다.
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script > CDN에서로드 할 때 window.lozad 에서 라이브러리를 찾을 수 있습니다.
html에서는 요소에 식별자를 추가합니다 (기본 선택기 식별 된 lozad 클래스).
< img class =" lozad " data-src =" image.png " >지금해야 할 일은 다음과 같이 Lozad를 인스턴스화하기 만하면됩니다.
const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ; 또는 DOM Element 참조 :
const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;또는 사용자 지정 옵션 :
const observer = lozad ( '.lozad' , {
rootMargin : '10px 0px' , // syntax similar to that of CSS Margin
threshold : 0.1 , // ratio of element convergence
enableAutoReload : true // it will reload the new image when validating attributes changes
} ) ;
observer . observe ( ) ;참조:
또는로드 요소에 사용자 정의 기능 정의를 제공하려면 다음과 같습니다.
lozad ( '.lozad' , {
load : function ( el ) {
console . log ( 'loading element' ) ;
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
} ) ; loaded 요소 상태를 확장하려면로드 된 옵션을 추가 할 수 있습니다.
참고 :
"data-loaded"="true"속성은 Lozad에 의해 요소가 이전에로드되었는지 확인하는 데 사용됩니다.
lozad ( '.lozad' , {
loaded : function ( el ) {
// Custom implementation on a loaded element
el . classList . add ( 'loaded' ) ;
}
} ) ;게으른 부하가 동적으로 추가 된 요소를 원한다면 :
const observer = lozad ( ) ;
observer . observe ( ) ;
// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as well반응 형 이미지와 함께 사용합니다
<!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >배경 이미지와 함께 사용합니다
<!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >여러 배경 이미지와 함께 사용합니다
<!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >반응 형 배경 이미지 (이미지 세트)와 함께 사용
<!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >배경 이미지를 분할하는 구분 기호를 변경하려면 :
<!-- custom delimiter for background images example -->
< div
class =" lozad "
data-background-image =" /first/custom,image,path/image.png-/second/custom,image,path/image.png "
data-background-delimiter =" - "
>
</ div >이미지가 나타나기 전에로드하려면 다음과 같습니다.
const observer = lozad ( ) ;
observer . observe ( ) ;
const coolImage = document . querySelector ( '.image-to-load-first' ) ;
// ... trigger the load of a image before it appears on the viewport
observer . triggerLoad ( coolImage ) ;때로는 이미지 로딩이 오랜 시간이 걸립니다. 이 경우 자리 표시 자 배경을 추가 할 수 있습니다.
< img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >Lozad는 IMG 요소의 자리 표시 자 배경색을 설정하고 사용자는 이미지가로드 될 때까지 폴백을 볼 수 있습니다.
깨진 그림 요소 구조를 만듭니다.
즉, 브라우저는 사진 태그를 지원하지 않습니다! IE 브라우저 소스와 함께
data-iesrc속성 (사진 태그에 대해서만)을 설정해야합니다.
Lazy-Loaded 이미지의
alt속성에 사용하기 위해data-alt속성을 Picture 태그에 추가 할 수 있습니다.
<!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- NO img element -->
<!-- instead of img element, there will be the last source with the minimum dimensions -->
<!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</ picture >Lozad 가이 그림 요소를로드하면 고정됩니다.
저품질 이미지 자리 표시 자와 같은 이미지 자리 표시기를 사용하려면 picture 태그 내에서 임시 img 태그를 설정할 수 있습니다. Lozad가 그림 요소를로드하면 제거됩니다.
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
< img src =" data:image/jpeg;base64,/some_lqip_in_base_64== " >
</ picture > < video class =" lozad " data-poster =" images/backgrounds/video-poster.jpeg " >
< source data-src =" video/mov_bbb.mp4 " type =" video/mp4 " >
< source data-src =" video/mov_bbb.ogg " type =" video/ogg " >
</ video > < iframe data-src =" embed.html " class =" lozad " > </ iframe > 그게 전부입니다. lozad 클래스를 추가하십시오.
< div data-toggle-class =" active " class =" lozad " >
<!-- content -->
</ div > active 클래스는 브라우저의 뷰포트에 들어가면 요소에 전환됩니다.
최신 브라우저에서 사용할 수 있습니다. 브라우저 지원을 사용할 수없는 경우 Polyfill을 사용하십시오.
IE11 지원을 위해이 폴리 필드를 사용하십시오.
lozad.js를 사용하는 동안 알아야 할 일반적인 gotchas에 대해 FAQ 위키를 확인하십시오.
기능과 수정 사항에 관심이 있으십니까?
기고에 대해 자세히 알아보십시오.
Changelog를 참조하십시오
MIT © Apoorv Saxena
