Lazy Load

Lazy Load延迟加载图像插件,直到用户滚动到它们才显示!

注意! 当前页面说明适用于新的2.x版本的“Lazy Load(延迟加载)”插件使用。

[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