LazyLoad 延迟加载(按需加载)是一种在页面加载时,只加载当前视窗内所需要的部分内容,避免不必要的资源浪费和页面加载时间过长的现象。这种技术在网站中的应用非常常见。
实现LazyLoad延迟加载的方式有多种,其中最常见的是使用JavaScript库。以下是一些常见的JavaScript库:
- Layzr.js:轻量级、易扩展和可定制,可用于图片和文本的延迟加载
- lozad.js:极简而快速的JavaScript库,可以延迟加载图像、视频、音频或iframe元素
- LazyLoad:使用内建可扩展API的高性能、小型JavaScript库,适用于多种元素的延迟加载。
在使用现有库之前,应该了解延迟加载的基本原理和实现流程。下面以图片延迟加载为例,进行解释:
data-src
<img src="https://via.placeholder.com/300x300" data-src="image.jpg">
const images = document.querySelectorAll("img[data-src]");
const inViewport = (image) => {
const rect = image.getBoundingClientRect();
return (
rect.top >= 0
&& rect.left >= 0
&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
const loadImage = (image) => {
image.setAttribute("src", image.getAttribute("data-src"));
image.onload = () => {
image.removeAttribute("data-src");
image.style.opacity = 1;
};
};
const handleScroll = () => {
images.forEach((image) => {
if (inViewport(image)) {
loadImage(image);
}
});
};
window.addEventListener("load", handleScroll);
window.addEventListener("scroll", handleScroll);
在上述JavaScript示例中,我们
- 首先获取页面中所有含有 data-src
属性的图片
- 接着实现了 inViewport()
方法,以检测图片是否在页面视窗内
- loadImage()
方法用于替换占位符
- 最后使用事件监听器来获取页面的滚动,以重新检查需要延迟加载的图片并加载图像
接下来示例说明如何使用Layzr.js库实现延迟加载原图并预加载已缩放版本的图像。
<img src="placeholder/300x300.png"
data-src="original-image.jpg"
data-src-small="300x300-image.jpg"
class="lazyload">
上述示例中,我们使用一个 lazyload
类来标记图片,并使用 data-src
属性来存储原始图像的URL,使用 data-src-small
存储25%的缩放版本的URL。我们还添加了一个占位符,这里使用了一个矩形的PNG。
在使用Layzr.js时,我们只需要如下简单代码:
const layzr = new layzr();
//延迟加载待替换的所有占位符中的原图像
layzr.on("load", (image) => {
//加载图片
const src = image.getAttribute("data-src");
image.setAttribute("src", src);
});
//预加载所有缩略图
document.addEventListener("DOMContentLoaded", () => {
const images = document.querySelectorAll("[data-src-small]");
images.forEach((img) => new Image().src = img.getAttribute("data-src-small"));
});
在上述JavaScript代码中,我们首先实例化了Layzr.js库,然后使用 on()
方法来监听 load
事件。在事件回调中,我们使用 setAttribute()
将实际图像的URL设置为图片的 src
属性。 load
事件在图片加载完成后立即触发。
最后,我们在页面加载时使用 document.addEventListener()
方法预加载所有缩略图。这样可以更好地保证延迟加载原图像时用户不会看到闪烁的问题。
参考文献:
- Lazy Loading Images Using Intersection Observer API in JavaScript
- Lozad.js - A performant, lazy loading and multi-serving image observer
- CallMeCavs/Layzr.js
本文链接:http://task.lmcjl.com/news/8262.html