前端实现图片懒加载(lazyload)的两种方式

在前端开发中，图片懒加载（Lazy Load）是一种优化网页性能的技术，它允许网页只在用户滚动到可视区域时才加载图片，而不是一次性加载所有图片。这样可以显著减少页面初始加载时间，提升用户体验，尤其在处理大量图片或者高分辨率图片的网页时效果更明显。下面我们将详细介绍两种常见的图片懒加载实现方式。 ### 1. 数据属性+Intersection Observer API **数据属性**：在HTML中，为图片元素添加一个自定义的数据属性，如`data-src`，将实际的图片URL存储在这个属性中，而`src`属性则设置为一个占位符，如空字符串或小尺寸的加载图。 ```html <img src="placeholder.jpg" data-src="real-image.jpg" alt="懒加载图片"> ``` **Intersection Observer API**：这是现代浏览器提供的一种观察元素是否进入视口的方法。创建一个Intersection Observer实例，设置观察器的选项，如阈值，然后将需要懒加载的图片元素传递给它。当元素进入视口时，监听到的回调函数会被触发，此时将`data-src`中的URL赋值给`src`，完成图片的加载。 ```javascript let observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.src = entry.target.dataset.src; observer.unobserve(entry.target); } }); }); let images = document.querySelectorAll('img[data-src]'); images.forEach(img => { observer.observe(img); }); ``` ### 2. 事件委托+滚动监听 **事件委托**：在父级元素（如body）上监听滚动事件，而不是在每个图片元素上，以减少事件处理器的数量，提高性能。 ```javascript document.body.addEventListener('scroll', lazyLoad); function lazyLoad() { let images = document.querySelectorAll('img[data-src]'); images.forEach(checkVisibility); } function checkVisibility(img) { let rect = img.getBoundingClientRect(); if (rect.top >= 0 && rect.bottom <= window.innerHeight) { img.src = img.dataset.src; img.removeEventListener('scroll', checkVisibility); } } ``` **滚动监听**：通过`window.onscroll`或`window.addEventListener('scroll', callback)`监听用户的滚动行为。当用户滚动到图片所在位置时，通过计算元素的相对视口位置来判断图片是否可见。如果图片在视口中，就加载图片，然后移除滚动事件监听器以避免重复加载。 以上两种方法都可以实现图片的懒加载，Intersection Observer API是现代浏览器推荐的方法，它更高效且不需要手动计算元素的位置，但支持度不如事件委托+滚动监听。选择哪种方法取决于项目需求和目标浏览器兼容性。 为了实际应用这两种方法，你可以查看提供的压缩包文件。`index.html`可能包含了实现懒加载的示例代码，`js`文件夹可能包含对应的JavaScript代码，而`images`文件夹可能包含占位符图片和实际的图片资源。`index_2.html`可能是另一种实现方式的示例。通过阅读和研究这些文件，你可以更好地理解如何在实际项目中应用图片懒加载技术。