随着前端页面变得越来越复杂，懒加载已经成为了一个必不可少的特性，它可以让我们高效地加载页面，减少资源消耗，提升用户体验。今天，我们将介绍如何使用 Custom Elements 和 Intersection Observer 实现懒加载。
什么是懒加载
懒加载（Lazy Loading）是通过延迟加载而不是一次性加载所有页面资源来提高网站性能的技术。这种技术被广泛应用于图片和视频等需要非常大的资源消耗的网页元素。
懒加载的主要原理是将需要加载的页面元素划分成多个模块，在用户浏览页面时，只加载当前模块内需要显示的页面元素，不需要显示的内容则暂不加载或者使用占位符代替，以此来提高网页加载性能。
使用 Custom Elements 实现懒加载
Web Components 提供了一种将页面元素封装成独立、可重复使用的组件的方式，Custom Elements 是 Web Components 中最重要的一部分。Custom Elements 允许创建自定义 HTML 标签，使我们能够更好地对页面的 DOM 结构进行控制。
我们可以通过自定义 HTML 标签，将图片、视频等需要懒加载的元素进行封装，并且通过 JavaScript 控制元素的加载时机。下面是一个简单的实现代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.2.10/bundles/webcomponents-ce.js"></script>
<script>
class LazyImage extends HTMLElement {
constructor() {
super();
this.observer = null;
this.src = null;
}
connectedCallback() {
this.src = this.getAttribute("data-src");
const options = {
rootMargin: "0px 0px 100px 0px",
threshold: 0,
};
this.observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
this.loadImage();
observer.disconnect();
}
});
},
options
);
this.observer.observe(this);
}
disconnectedCallback() {
if (this.observer) {
this.observer.disconnect();
}
}
loadImage() {
this.src && this.setAttribute("src", this.src);
}
}
customElements.define("lazy-image", LazyImage);
</script>
</head>
<body>
<lazy-image data-src="example.jpg"></lazy-image>
</body>
</html>在上面的代码中，我们定义了一个 LazyImage 类，它继承自 HTMLElement。在 connectedCallback 生命周期方法中，我们使用 IntersectionObserver 监听了当前元素与视口的交叉情况，如果当前元素出现在视口中，那么就调用 loadImage 方法来加载图片。在 loadImage 方法中，我们使用 setAttribute 方法将图片的 src 属性设置为 data-src 的属性值，实现了图片的懒加载。
使用 Intersection Observer API 实现懒加载
Intersection Observer API 是一个新的 Web API，它可以让我们异步观察目标元素与另外一个元素的交叉状态，从而实现一些常见的 UI 效果，比如懒加载、响应式触发动画等。使用 Intersection Observer API 可以更加简单地进行懒加载的实现。
下面是一个简单的懒加载示例：
<!DOCTYPE html>
<html>
<head>
<script>
const images = document.querySelectorAll("img.lazy");
const options = {
rootMargin: "0px 0px 100px 0px",
threshold: 0,
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
}, options);
images.forEach((img) => {
observer.observe(img);
});
</script>
</head>
<body>
<img class="lazy" data-src="example.jpg" />
</body>
</html>在上面的代码中，我们首先通过 document.querySelectorAll 方法获取了所有需要懒加载的图片。然后我们使用 IntersectionObserver 监听每个图片与视口的交叉情况，如果当前图片进入了视口，那么我们就将 data-src 属性作为图片的 src 属性来加载图片。
总结
使用 Custom Elements 和 Intersection Observer 实现懒加载是一种非常简单、高效的方法，它能够提高网页的加载性能，改善用户体验，并且极大地提高了网页的可维护性。希望本文对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e32b1add4f0e0ff73f6ce