详解用JS实现页面懒加载

最新推荐文章于 2024-03-17 23:17:34 发布

天玄TX

最新推荐文章于 2024-03-17 23:17:34 发布

阅读量715

点赞数 2

文章标签： javascript 前端

本文链接：https://blog.csdn.net/TianXuab/article/details/131491480

版权

懒加载是一种优化网页性能的技术，它只加载视口内的内容，当用户滚动页面时再加载其他部分。上述JavaScript代码示例展示了如何选取带有lazy类的图片元素，在滚动、窗口resize或orientationchange事件触发时，根据元素位置和可视区域判断是否加载图片数据源。

摘要由CSDN通过智能技术生成

懒加载（Lazy Loading），也称为延迟加载，是一种技术，它可以先加载当前页面可视区域的内容，当用户滚动到页面的其他部分时再去加载其他部分的内容，从而减轻页面加载压力，提高页面性能和用户体验。下面是用 JavaScript 实现懒加载的代码：

HTML 代码：

<div class="container">
  <img data-src="image1.jpg" class="lazy">
  <img data-src="image2.jpg" class="lazy">
  <img data-src="image3.jpg" class="lazy">
  <img data-src="image4.jpg" class="lazy">
  <img data-src="image5.jpg" class="lazy">
  <img data-src="image6.jpg" class="lazy">
</div>

JavaScript 代码：

window.addEventListener('DOMContentLoaded', function() {

  let images = document.querySelectorAll('.lazy');

  function lazyLoad() {
    images.forEach(image => {
      if (image.offsetTop < window.innerHeight + window.pageYOffset && !image.src) {
        image.src = image.dataset.src;
      }
    });
  }

  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  window.addEventListener('orientationchange', lazyLoad);

  lazyLoad();

});

在上面的示例中，我们首先获取了所有带有 lazy 类的图像元素，然后定义了一个函数 lazyLoad()，这个函数遍历了图片元素，如果图片元素的顶部距离小于当前可视区域的高度加上滚动距离，并且图片元素还没有加载过，那么就将图片元素的 data-src 属性赋值给它的 src 属性，实现了懒加载的效果。

最后，我们给 window 对象添加了三个事件监听器：scroll、resize 和 orientationchange。这几个事件监听器都会触发 lazyLoad() 函数，以便在滚动、调整大小或旋转设备时及时加载图片。