如何实现图片懒加载？

探讨了多种图片懒加载的实现方式及其优缺点，包括原生 HTML5、JavaScript 自定义和框架集成方案。

性能优化中等 JavaScript 懒加载性能调优

图片懒加载是一种优化技术，旨在延迟加载用户当前视图区外的图片资源，以减少页面初始加载时间，节省带宽，并提升用户体验。

具体实现方式主要包括：

1. 原生 HTML5 实现：

使用浏览器内置的 loading="lazy" 属性，无需额外的 JavaScript 代码：

<img src="thumbnail.jpg" data-src="largeImage.jpg" alt="示例图片" loading="lazy">

优点：简单高效，由浏览器自动处理滚动事件。
缺点：不兼容旧浏览器（如 IE）。

2. JavaScript 自制实现：

(a) 监听滚动事件：

通过侦测图片位置与 viewport 关系动态加载：

<img src="placeholder.jpg" data-src="actualImage.jpg" class="lazy-img">

const images = document.querySelectorAll('.lazy-img');
const checkVisibility = () => {
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < window.innerHeight) {
      img.src = img.dataset.src; 
    }
  });
};
window.addEventListener('scroll', checkVisibility);
window.addEventListener('load', checkVisibility);

关键步骤：在滚动时将 data-src 的实际 URL 赋给 src 属性。

(b) 利用 IntersectionObserver API：

更高效的方法，无需轮询计算位置：

<img src="placeholder.jpg" data-src="actualImage.jpg" class="lazy">

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
document.querySelectorAll('.lazy').forEach(img => {
  observer.observe(img);
});

优势：API监控视口交叉事件，避免 scroll 事件卡顿。

3. 框架集成方案：

(a) 在 Vue 中实现：

使用 vue-lazyload 插件：

// main.js
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
  loading: 'loader.gif',  // 占位图
  error: 'errorImage.png', // 错误图
  preLoad: 1.3,           // 预加载高度
  attempt: 1
});

<img v-lazy="imageUrl" alt="图片">
<!-- 背景图示例 -->
<div v-lazy:background-image="'bgImage.jpg'"></div>

安装: npm i vue-lazyload@1。

(b) jQuery 实现：

通过第三方库如 jquery.lazyload.js：

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="path/to/jquery.lazyload.js"></script>
</head>
<body>
  <img src="smallImg.png" data-original="original.jpg" class="lazy-load">
</body>

<script>
  $(document).ready(function() {
    $(".lazy-load").lazyload(); // 默认替换 data-original
  });
</script>

通用最佳实践：

避免额外加载压力：使用极小的占位符图片 (如 1px 图)。
确保回退方案：旧浏览器中保持 HTML 原生属性的替代 (如前述 JS 监听方法)，或统一使用库支持所有设备。

以上方法能显著提升网页性能。