jQuery Lazy Load
插件 jquery_lazyload 中文 API 文档
Lazy Load Remastered
延迟加载延迟了长网页中图像的加载。
在用户滚动到视口之外的图像之前，不会加载它们。这与图像预加载相反。
这是原始延迟加载插件的现代JavaScript 版本。它使用 Intersection Observer API 观察图像何时进入浏览器视口。
原始代码的灵感来自 Matt Mlinac 的 YUI ImageLoader 实用程序。新版本大量借用了 Dean Hume 的博客文章。
基本用法
默认情况下，惰性加载假定可以在 data-src 属性中找到原始高分辨率图像的 URL 。您还可以在 src 属性中包括可选的低分辨率占位符。
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<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，您就可以使用工厂方法初始化插件了。如果您不传递任何设置或图像元素，它将使用 class 延迟加载所有图像 lazyload。
lazyload();
如果愿意，可以将图像元素显式传递给工厂。例如，如果您使用其他类名，请使用此名称。
let images = document.querySelectorAll(".branwdo");
lazyload(images);
如果愿意，还可以使用普通的旧构造函数。
let images = document.querySelectorAll(".branwdo");
new LazyLoad(images);
可以通过传递附加参数来配置核心 IntersectionObserver
new LazyLoad(images, {
root: null,
rootMargin: "0px",
threshold: 0
});
附加 API
要使用其他 API，您需要将插件实例分配给变量。
let lazy = lazyload();
要强制加载所有图像，请使用 loadimages().
lazy->loadImages();
要销毁插件并停止延迟加载，请使用 destroy().
lazy->destroy();
请注意， destroy() 这不会加载视口外图像。如果您还想加载图像，请使用loadAndDestroy()。
lazy->loadAndDestroy();
jQuery 包装器不提供其他 API。
jQuery Wrapper
如果使用 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();
方案
图像模糊
低分辨率占位符，即。“模糊”技术。您可以在 in this blog entry 中看到这一点。向下滚动以查看模糊的图像。
<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" />
安装
这项工作仍在进行中。您可以使用 yarn 或 npm 安装 beta 版本。
$ yarn add lazyload
$ npm install lazyload
License
All code licensed under the MIT License. All images licensed under Creative Commons Attribution 3.0 Unported License. In other words you are basically free to do whatever you want. Just don’t remove my name from the source.
