页面图片多，如何实现按需加载？- 编程源码 -卓越飞翔博客

有个网站图片比较多，想请教一下如何在页面上实现按需加载——就是浏览器滚动到哪加载到哪，而不是浏览器打开时同时加载。

<!-- 这是一个图片标签，但是图片的 src 属性是空的 -->  
<img class="lazy" data-src="path/to/image1.jpg" alt="image1">  
<img class="lazy" data-src="path/to/image2.jpg" alt="image2">  
<img class="lazy" data-src="path/to/image3.jpg" alt="image3">  
  
<script>  
window.onload = function() {  
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));  
      
    lazyImages.forEach(function(img) {  
        img.src = img.dataset.src;  
    });  
}  
</script>

在这个例子中，我们首先在 HTML 中创建了一些 img 标签，但它们的 src 属性是空的。然后我们在 JavaScript 中使用 querySelectorAll 方法找到所有带有 .lazy 类的 img 标签。然后我们遍历这些找到的图片，并将它们的 src 属性设置为它们 data-src 属性的值。这样，只有当图片滚动到视窗中时，图片才会开始加载。

方法2
确保页面所有图片都能被加载，特别是最底部的图片（有时候图片太贴近底部，会造成不加载）。

<script>
  // 获取页面可视区域的高度
  const visibleHeight = window.innerHeight;
  // 获取页面上所有图片的元素
  const imgs = document.querySelectorAll("img");
  // 为每个图片元素添加 data-src 属性
  for (const img of imgs) {
    img.setAttribute("data-src", img.src);
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
  }

  // 设置阈值和延迟
  const threshold = 100;

  // 节流函数
  let throttleTimeout;
  function throttleScroll() {
    if (throttleTimeout) {
      return;
    }
    throttleTimeout = setTimeout(() => {
      throttleTimeout = null;
      lazyLoad();
    }, 200);
  }

  // 监听滚动事件
  window.addEventListener("scroll", throttleScroll);

  // 懒加载函数
  function lazyLoad() {
    // 遍历所有图片元素
    for (const img of imgs) {
      // 获取图片元素的顶部和底部位置
      const rect = img.getBoundingClientRect();
      const top = rect.top;
      const bottom = rect.bottom;

      // 如果图片元素的顶部或底部位置距离可视区域顶部距离小于阈值
      if ((top <= visibleHeight && bottom >= 0) || (bottom >= 0 && top <= visibleHeight + threshold)) {
        img.src = img.getAttribute("data-src");
      }
    }
  }

  // 初始加载一次
  lazyLoad();
</script>

相关推荐