懒加载图片是什么？如何实现？

懒加载图片是一种优化网页或应用程序性能的技术，它允许网页在用户滚动页面时按需加载图片，而不是在页面加载时一次性加载所有图片。这种技术的目的是减少初始页面加载时间，节省网络带宽，并提高用户体验。

实现懒加载图片的方法

1. JavaScript 实现： 使用 JavaScript 可以实现懒加载。基本思路是检测图片是否进入可视区域，如果进入可视区域，则将图片的 src 属性设置为实际图片地址，从而触发图片的加载。可以使用 IntersectionObserver API 来实现这一功能。

   document.addEventListener("DOMContentLoaded", function() {
       var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
   
       if ("IntersectionObserver" in window) {
           let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
               entries.forEach(function(entry) {
                   if (entry.isIntersecting) {
                       let lazyImage = entry.target;
                       lazyImage.src = lazyImage.dataset.src;
                       lazyImage.classList.remove("lazy");
                       lazyImageObserver.unobserve(lazyImage);
                   }
               });
           });
   
           lazyImages.forEach(function(lazyImage) {
               lazyImageObserver.observe(lazyImage);
           });
       } else {
           // Fallback for browsers that don't support IntersectionObserver
           lazyImages.forEach(function(lazyImage) {
               lazyImage.src = lazyImage.dataset.src;
               lazyImage.classList.remove("lazy");
           });
       }
   });
   

2. HTML 属性： 在 HTML 中，可以使用 loading 属性来实现懒加载。loading 属性有三个值：lazy（默认值，表示懒加载）、eager（表示立即加载）和 auto（表示浏览器自行决定是否懒加载）。

   <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Descriptive text">
   

3. CSS 实现： 通过 CSS 可以实现图片的懒加载，但通常需要结合 JavaScript。例如，可以使用 CSS 的 object-fit 和 object-position 属性来显示占位图，并在图片加载完成后替换为实际图片。

4. 第三方库： 有许多第三方库可以帮助实现懒加载，例如 vue-lazyload（适用于 Vue.js 应用）、react-lazyload（适用于 React 应用）等。这些库通常提供了丰富的配置选项和易用的 API。

懒加载的优势

• 性能优化：减少初始页面加载时间，提高页面响应速度。
• 带宽节省：只加载用户即将看到的图片，减少不必要的网络流量消耗。
• 用户体验提升：加快页面加载速度，提升用户满意度。

注意事项

• 兼容性：确保懒加载技术在不同浏览器和设备上都能正常工作。
• 占位图：使用合适的占位图可以提高页面的视觉效果。
• SEO：懒加载图片可能对搜索引擎优化（SEO）有一定影响，需要适当处理。