如何实施懒加载策略 - 前端问答学习-微参考

在现代Web开发中，性能优化是提升用户体验的一个重要方面。其中，图片懒加载是一种常用的优化手段，它能够延迟非视口图片的加载，直到它们出现在视口中。这种方法可以显著提高页面加载速度，尤其是在含有大量图片的长页面上。

实现懒加载主要有以下几种方法：

1. 使用JavaScript实现懒加载

基本原理：

监听滚动事件，当用户滚动到页面的某个部分时检查图片是否进入视口。

使用`getBoundingClientRect()`方法获取图片的相对于视口的位置。

如果图片已经进入视口，将图片的`src`属性设置为真实的图片URL。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
let images = document.querySelectorAll('img[data-src]');

function loadImage(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
}

function checkImages() {
images.forEach(img => {
let rect = img.getBoundingClientRect();
if (rect.top < window.innerHeight) {
loadImage(img);
}
});
}

window.addEventListener('scroll', checkImages);
checkImages();
});

2. 使用Intersection Observer API

基本原理：

使用`Intersection Observer` API，它提供了一种异步检测目标元素与其祖先或顶级文档视窗交叉状态的方法。

当目标元素进入视口时，会触发回调函数，执行图片加载。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
let images = document.querySelectorAll('img[data-src]');

function loadImage(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
}

let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
loadImage(entry.target);
observer.unobserve(entry.target);
}
});
});


images.forEach(img => observer.observe(img));
});

3. 使用CSS和JavaScript配合

基本原理：

使用CSS样式将默认的图片占位符设置为极小的尺寸或者透明。

使用JavaScript监听滚动事件，当图片进入视口时，修改CSS样式，展示真实的图片。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
let placeholders = document.querySelectorAll('.lazy-image');

function revealImage(img) {
img.style.backgroundImage = `url(${img.getAttribute('data-src')})`;
img.classList.remove('lazy-image');
}

function checkImages() {
placeholders.forEach(img => {
let rect = img.getBoundingClientRect();
if (rect.top < window.innerHeight) {
revealImage(img);
}
});
}

window.addEventListener('scroll', checkImages);
checkImages();
});