lozad.js
1.0.0
純JS中的高性能，光線和可配置的懶惰加載器，沒有圖像，iframes等的依賴項
還有更多...
現有的懶惰加載庫已連接到滾動事件或使用定期計時器，並在需要懶惰的元素上調用getBoundingClientRect() 。但是，這種方法的痛苦很慢，因為每次呼籲getBoundingClientRect()迫使瀏覽器重新分配整個頁面，並會向您的網站介紹相當大的Jank。
IntersectionObserver的設計是使其更有效和性能的，並且它降落在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然後，使用模塊捆綁器（如匯總或webpack），請盡可能多地使用：
// 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狀態，則可以添加加載選項：
注意：Lozad使用
"data-loaded"="true"屬性來確定是否以前已加載了元素。
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屬性（僅適用於圖片標籤）
可以將
data-alt算法添加到圖片標籤中，以用於懶惰的圖像的alt屬性
<!-- 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時，請查看一些常見的陷阱，以查看一些常見的陷阱
對貢獻功能和修復感興趣嗎？
閱讀有關貢獻的更多信息。
請參閱Changelog
麻省理工學院©Apoorv Saxena
