前端实现图片懒加载
图片懒加载是一种优化网页性能的技术，它延迟加载页面中的图片，只有当图片进入可见区域时才加载。以下是实现图片懒加载的基本步骤：
1. 在 HTML 中给所有需要懒加载的图片添加一个占位符，可以是一张简单的小图片，或者是一个透明的 DIV 元素。
<im g src="placeholder.jpg" data-src="image.jpg" alt="Lazy-loaded image">
2. 使用 JavaScript 监听滚动事件或其他触发条件（如页面加载完成），并判断图片是否进入可见区域。
window.addEventListener('scroll', function() {
var lazyImages = document.querySelectorAll('img');
for (var i = 0; i < lazyImages.length; i++) {
if (isInViewport(lazyImages)) {
lazyImages.src = lazyImages.getAttribute('data-src');
lazyImages.removeAttribute('data-src');
}
}
});
function isInViewport(element) {
var rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
3. 当图片进入可见区域后，将 `data-src` 属性的值赋给 `src` 属性，以此来加载真实的图片资源。
这样就实现了图片懒加载。通过延迟加载图片，可以减少页面的加载时间，提高用户体验。需要注意的是，为了确保懒加载正常工作，建议在页面加载完成后才执行懒加载脚本。
页:
[1]