js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

1. 首屏延迟加载实现方法

首屏延迟加载可以提高网站的加载速度，让用户更快地看到页面的内容。实现方法如下：

步骤一：将首屏需要展示的图片的src属性设置为data-src

<img data-src="图片地址" alt="图片描述">

步骤二：通过JavaScript获取屏幕高度和滚动距离

var clientHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

步骤三：判断图片是否在可视范围内，如果是则将data-src属性值替换为src属性值

var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
  var img = imgs[i];
  if (img.getAttribute('data-src')) {
    var rect = img.getBoundingClientRect();
    if (rect.top <= clientHeight + scrollTop) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  }
}

1. 多屏单张图片延迟加载效果

多屏单张图片延迟加载可以减少网页的请求次数，从而提高网页的性能。实现方法如下：

步骤一：将需要延迟加载的图片的src属性设置为占位图片的地址

<img src="占位图片地址" data-src="真实图片地址" alt="图片描述">

步骤二：通过JavaScript获取屏幕高度和滚动距离

和首屏延迟加载相同。

步骤三：判断图片是否在可视范围内，如果是则将data-src属性值替换为src属性值

var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
  var img = imgs[i];
  if (img.getAttribute('data-src')) {
    var rect = img.getBoundingClientRect();
    if (rect.top <= clientHeight + scrollTop) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  }
}

示例说明：

HTML代码：

<div class="container">
  <img src="https://via.placeholder.com/350x150?text=placeholder" data-src="https://via.placeholder.com/350x150?text=real+pic" alt="pic">
  <img src="https://via.placeholder.com/350x150?text=placeholder" data-src="https://via.placeholder.com/350x150?text=real+pic" alt="pic">
  <img src="https://via.placeholder.com/350x150?text=placeholder" data-src="https://via.placeholder.com/350x150?text=real+pic" alt="pic">
  <img src="https://via.placeholder.com/350x150?text=placeholder" data-src="https://via.placeholder.com/350x150?text=real+pic" alt="pic">
  <img src="https://via.placeholder.com/350x150?text=placeholder" data-src="https://via.placeholder.com/350x150?text=real+pic" alt="pic">
</div>

CSS代码：

.container {
  margin: 50px auto;
  max-width: 400px;
}

img {
  display: block;
  margin-bottom: 20px;
  width: 100%;
  height: auto;
  background-color: #eee;
}

JavaScript代码：

var clientHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
  var img = imgs[i];
  if (img.getAttribute('data-src')) {
    var rect = img.getBoundingClientRect();
    if (rect.top <= clientHeight + scrollTop) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  }
}

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  for (var i = 0; i < imgs.length; i++) {
    var img = imgs[i];
    if (img.getAttribute('data-src')) {
      var rect = img.getBoundingClientRect();
      if (rect.top <= clientHeight + scrollTop) {
        img.src = img.getAttribute('data-src');
        img.removeAttribute('data-src');
      }
    }
  }
});

在示例中，首先将所有需要延迟加载的图片的src属性设置为占位图片的地址，然后在JavaScript中监听滚动事件，当图片进入可视范围内时将data-src属性值替换为src属性值。整个过程实现了多屏单张图片的延迟加载效果。