JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)

以下是我为你准备的完整攻略，希望能对你有所帮助。

什么是图片懒加载？

在网页开发中，图片懒加载指的是在页面加载完成后，不会立即加载所有图片资源，而是只加载那些用户正在访问或即将需要的图片资源，从而提高页面的加载速度和用户体验。

实现原理

图片懒加载的实现原理主要是通过JavaScript控制图片的加载行为，比如：设置图片的data-src属性，使用Intersection Observer API监听图片是否进入浏览器视窗等。

完整的图片懒加载过程如下：

1. 首先，我们需要在HTML中为图片设置占位符，比如一个1*1的透明像素图片，或者使用css样式设置占位符的高度；
2. 然后，使用JavaScript获取所有需要懒加载的图片元素；
3. 针对每个需要懒加载的图片元素，将图片的真实地址存储在data-src属性中，并将src属性设置为占位符；
4. 随着用户不断滚动页面，使用Intersection Observer API监听图片是否进入浏览器视窗；
5. 当图片元素进入浏览器视窗内，即intersectionRatio大于0时，将图片真实地址从data-src属性中取出，赋值给src属性，图片开始加载。

代码实现

下面提供两种示例代码，一个基础版，一个增强版。

基础版

<!--HTML-->
<img class="lazyload" src="占位符" data-src="真实图片地址" />

<!--JavaScript-->
window.onload = function() {
  var lazyload = document.getElementsByClassName('lazyload');
  var len = lazyload.length;
  var index = 0;

  function lazyloadImg(){
    for(; index < len; index++){
      var viewHeight = document.documentElement.clientHeight; //可见区域高度
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条高度
      var offsetTop = lazyload[index].offsetTop; //图片距离文档顶部高度
      if(offsetTop < viewHeight + scrollTop){
        if(lazyload[index].getAttribute('src') !== lazyload[index].getAttribute('data-src')){
          lazyload[index].src = lazyload[index].getAttribute('data-src');
        }
      }
    }
  }
  lazyloadImg();
  window.addEventListener('scroll', lazyloadImg);
  window.addEventListener('resize', lazyloadImg);
}

增强版

<!--HTML-->
<img class="lazyload" src="占位符" data-src="真实图片地址" />
<img class="lazyload" src="占位符" data-src="真实图片地址" />

<!--JavaScript-->
window.onload = function() {
  var lazyload = document.getElementsByClassName('lazyload');
  var len = lazyload.length;
  var index = 0;
  const THRESHOLD = 0.3; //阈值

  function lazyloadImg(){
    for(; index < len; index++){
      var intersection = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.intersectionRatio > THRESHOLD) {
            intersection.unobserve(entry.target);
            if(entry.target.getAttribute('src') !== entry.target.getAttribute('data-src')){
              entry.target.src = entry.target.getAttribute('data-src');
            }
          }
        });
      }, {threshold: THRESHOLD});

      if (lazyload[index].getAttribute('src') !== lazyload[index].getAttribute('data-src')) {
        intersection.observe(lazyload[index]);
      }
    }
  }
  lazyloadImg();
  window.addEventListener('scroll', lazyloadImg);
  window.addEventListener('resize', lazyloadImg);
}

总结

图片懒加载可以有效提高页面加载速度和用户体验，特别是对于那些图片较多或者页面比较长的网站，懒加载技术更是必不可少。上面提供的两种代码示例也可以根据具体需求进行扩展和优化，满足更多的实际应用场景。