js实现多张图片延迟加载效果

当网页中要加载的图片过多时，如果不进行延迟加载，会导致页面加载缓慢，影响用户体验。本文介绍如何使用 JavaScript 实现多张图片延迟加载效果。

1. 方案一

第一步是在 HTML 中添加图片元素，并设置占位符图片，例如：

<img src="placeholder.gif" data-src="image1.jpg">
<img src="placeholder.gif" data-src="image2.jpg">
<img src="placeholder.gif" data-src="image3.jpg">
<img src="placeholder.gif" data-src="image4.jpg">

这里的占位符图片可以是任意一个小的图片文件，用于占据原本要加载的图片的位置。

第二步是通过 JavaScript 中的 window.onload 事件，监听当网页中所有资源文件都加载完成后，再开始加载图片。其中 querySelectorAll 方法可以选取所有带有 data-src 属性的图片元素，并将图片的 src 属性设置为对应的 data-src 属性值，例如：

window.onload = function() {
  var images = document.querySelectorAll('img[data-src]');
  Array.prototype.forEach.call(images, function(image) {
    image.setAttribute('src', image.getAttribute('data-src'));
  });
};

这里采用原生 JavaScript 的 Array.prototype.forEach.call 方法，是因为 images 是一个类数组对象。

1. 方案二

第一步是与方案一相同，在 HTML 中添加图片元素，并设置占位符图片。

第二步是通过 JavaScript 中的 window.onscroll 事件，监听当用户滚动页面时，判断哪些图片已经进入到了可视区域内。document.documentElement.clientHeight 表示当前窗口可见区域高度，getBoundingClientRect() 方法可以获取元素相对于视口的位置信息，判断条件为元素距离顶部的位置是否小于等于视口可见区域的高度。代码如下：

window.onscroll = function() {
  var images = document.querySelectorAll('img[data-src]');
  Array.prototype.forEach.call(images, function(image) {
    if (image.getBoundingClientRect().top <= document.documentElement.clientHeight) {
      image.setAttribute('src', image.getAttribute('data-src'));
      image.removeAttribute('data-src');
    }
  });
};

这里需要注意，在图片元素加载完成后，需要将其 data-src 属性删除，以避免重复加载。

以上两种方案都可以实现多张图片的延迟加载效果，第一种方案在页面加载完成后一次性加载所有图片，适合图片数量较少的情况；第二种方案则是在用户滚动页面时一张一张地加载图片，适合大量图片需要延迟加载的情况。