HTML 延迟加载图片

在网站中，图片通常是网页加载速度变慢的罪魁祸首之一。当用户访问网站时，不必全部立即加载图片，可以在用户滚动页面时再加载图片，这就是所谓的延迟加载。

实现方法

1. 使用 JavaScript

可以使用 JavaScript 来实现延迟加载图片。具体实现步骤如下：

1. 在 HTML 中的 img 标签中添加一个自定义属性，比如 data-src，用于存储实际的图片地址。
2. 通过 JavaScript 遍历页面中所有的 img 标签，判断 img 标签是否进入了浏览器的可见区域。
3. 如果 img 标签进入了浏览器的可见区域，则将 data-src 中存储的实际图片地址赋值给 img 标签的 src 属性，并移除自定义属性 data-src。

代码示例：

function lazyLoad() {
  let images = document.getElementsByTagName('img');
  Array.prototype.forEach.call(images, function(img) {
    let rect = img.getBoundingClientRect();
    if (rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}
window.addEventListener('scroll', lazyLoad);

2. 使用图片懒加载库

除了手动实现 JavaScript 代码外，还可以使用许多图片懒加载库来快速实现延迟加载图片。常用的图片懒加载库有 LazyLoad、Layzr.js、Yall.js 等。

注意事项

1. 对于需要优先展示的图片，建议在 HTML 中直接使用 img 标签的 src 属性加载。
2. 对于隐藏的图片（例如 tab 切换），需要使用 JS 预加载或者其他的方法来确保图片已经加载完成。
3. 延迟加载图片对 SEO 有一定影响，因为蜘蛛不会像浏览器一样触发滚动事件，建议有助 SEO 的图片（如主页上的图片）直接加载。