js实现图片懒加载，可以通过调用lazyLoad函数并传入相应的元素作为参数来实现

枫叶&情缘

已于 2023-08-30 13:54:49 修改

阅读量234

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-07-31 17:02:09 首次发布

本文链接：https://blog.csdn.net/weixin_45791806/article/details/132026175

版权

JavaScript 专栏收录该内容

69 篇文章 2 订阅

订阅专栏

此代码示例展示了一个使用IntersectionObserverAPI进行图片懒加载的方法。当图片进入视口时，JavaScript会将data-src属性的值赋给src属性，从而加载图片，提高网页性能。

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

<!DOCTYPE html>
<html>
<head>
  <title>Lazy Load Example</title>
  <style>
    img {
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <h1>Lazy Load Example</h1>
  <img data-src="image.jpg" alt="Lazy Loaded Image">
  
  <script>
    function lazyLoad(element) {
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
          }
        });
      });
    
      observer.observe(element);
    }
    
    const lazyImage = document.querySelector('img');
    lazyLoad(lazyImage);
  </script>
</body>
</html>