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
