注意! 当前页面说明适用于新的2.x版本的“Lazy Load(延迟加载)”插件使用。
[WIP] 修复了延迟加载
Lazy Load延迟加载插件延迟了长网页中图像的加载。用户滚动到视窗之外的图像之前,不会加载它们。这与图像预加载相反。
对于那些着急的人,有几个演示页面:基本选项, 包含许多图像的页面 和 使用timeout加载图像。
下载
基本用法
默认情况下,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