[WIP] 修复了延迟加载

Lazy Load延迟加载插件延迟了长网页中图像的加载。用户滚动到视窗之外的图像之前，不会加载它们。这与图像预加载相反。

对于那些着急的人，有几个演示页面：基本选项, 包含许多图像的页面 和 使用timeout加载图像。

下载

点击下载LazyLoad.js 2.x.zip

基本用法

默认情况下，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之后，您就可以使用Lazy Load延迟加载插件方法初始化插件了。如果您不传递任何设置或图像元素，它将使用class延迟加载所有图像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 wrapper不提供其他API。

jQuery wrapper

如果您使用jQuery，则有一个wrapp，您可以使用熟悉的旧语法。请注意，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" />

响应式图像

可以通过延迟加载响应式图像data-srcset。如果浏览器不支持，srcset 并且没有polyfill，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