延迟加载 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
阅读更多
文章标签: 前端 插件
个人分类: Web前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭