延迟加载 Lazy Load

延迟加载延迟加载长网页中的图像。在用户滚动到视口之前，视口外的图像将不会被加载。这与图像预加载相反。

这是原始Lazy Load插件的现代香草JavaScript版本。它使用Intersection Observer API来观察图像何时进入浏览器视口。原始代码受Matt Mlinac的YUI ImageLoader实用程序的启发。新版本大量来自Dean Hume 的博客文章。

对于那些匆忙有几个演示页面：基本选项，包含许多图像的页面和使用超时加载图像。

基本用法

默认情况下，Lazy Load假定可以在data-src属性中找到原始高分辨率图像的URL 。您还可以在src属性中包含可选的低分辨率占位符。

<img class="lazyload" data-src="img/example.jpg" width="765" height="574">
<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574">

随着HTML的到位，您可以使用工厂方法初始化插件。如果你没有传递任何设置或图像元素，它将延迟加载所有图像的类lazyload。

lazyload();

如果你喜欢，你可以明确地将图像元素传递给工厂。例如，如果您使用不同的类名称，请使用此选项。

let images = document.querySelectorAll(".branwdo");
lazyload(images);

如果你喜欢，你也可以使用普通的旧构造函数。

let images = document.querySelectorAll(".branwdo");
new LazyLoad(images);

额外的API

要使用额外的API，您需要将插件实例分配给一个变量。

let lazy = lazyload();

强制加载所有图像使用loadimages()。

lazy->loadImages();

销毁插件并停止使用懒惰destroy()。

lazy->destroy();

请注意，destroy()不会加载视口图像。如果你还想加载图片使用loadAndDestroy()。

lazy->loadAndDestroy();

使用jQuery包装器无法使用其他API。

jQuery包装

如果您使用jQuery，那么您可以使用熟悉的旧语法的包装器。请注意，提供data-original默认情况下使用BC 。这应该是对插件以前版本的替代。

<img class="lazyload" data-original="img/example.jpg" width="765" height="574">
<img class="lazyload" src="img/example-thumb.jpg" data-original="img/example.jpg" width="765" height="574">

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

食谱

模糊图像

低分辨率占位符即。“模糊”技术。您可以在此博客条目中看到此操作。向下滚动以查看模糊图像。

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="original.jpg"
     width="1024" height="768" />

<div class="lazyload"
     style="background-image: url('thumbnail.jpg')"
     data-src="original.jpg" />

响应式图像

Lazyloaded Responsive图像通过支持data-srcset。如果浏览器不支持srcset并且没有填充图片，data-src则会显示图片。

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="large.jpg"
     data-srcset="small.jpg 480w, medium.jpg 640w, large.jpg 1024w"
     width="1024" height="768" />

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="normal.jpg"
     data-srcset="normal.jpg 1x, retina.jpg 2x"
     width="1024" height="768" />

内嵌的占位符图像

为了减少请求数量，您可以使用数据uri图像作为占位符。

<img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
     data-src="original.jpg"
     width="1024" height="768" />

安装

这仍在进行中。目前还没有发布。同时你可以使用rawgit。

$ wget https://rawgit.com/tuupola/jquery_lazyload/2.x/lazyload.js