JS 实现图片懒加载

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

wyc_ok

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

阅读量220

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/wu_2004/article/details/133804586

版权

实现图片懒加载的思路是延迟加载页面中的图片，只有当用户滚动到图片可见区域时才加载图片，以减少初始页面加载时间和网络带宽的使用。以下是实现图片懒加载的一般思路：

1. 标记要延迟加载的图片:
- 在HTML中，为要进行懒加载的图片元素添加一个占位符，通常是一个小尺寸的透明图片或者一个简单的`<div>`元素。这个占位符将首先显示在页面上，代替原始图片。

2. 设置数据属性:
- 为每个要懒加载的图片元素添加一个自定义数据属性，例如`data-src`，用于存储原始图片的`src`属性的值。将`src`属性设置为空或者一个占位符。

3. 监测滚动事件:
- 使用JavaScript来监测页面滚动事件。当用户滚动页面时，您可以计算每个图片元素是否进入了可见区域。

4. 加载图片:
- 当图片进入可见区域时，通过JavaScript将`data-src`属性的值设置为`src`属性，从而加载原始图片。这会触发浏览器下载图片。

5. 取消滚动事件监听:
- 一旦图片加载完成，您可以停止对滚动事件的监听，以减少不必要的计算和处理。

以下是一个简单的示例代码来实现图片懒加载：

<!DOCTYPE html>
<html>
<head>
  <style>
    .lazy-img {
      width: 500px;
      height:500px;
      background: url(./img/undefind.png) center center no-repeat;
    }
  </style>
</head>
<body>
  <div class="lazy-img" data-src="./img/1.png"></div>
  <div class="lazy-img" data-src="./img/2.png"></div>
  <div class="lazy-img" data-src="./img/3.png"></div>

  <script>
    function lazyLoad() {
      const images = document.querySelectorAll(".lazy-img");
      images.forEach((img) => {
        const rect = img.getBoundingClientRect();
        if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
          img.style.backgroundImage = `url(${img.dataset.src})`;
          img.classList.remove("lazy-img");
          img.style.height = '500px';
          img.style.width = '500px';
        }
      });
    }

    window.addEventListener("scroll", lazyLoad);
    window.addEventListener("load", lazyLoad);
  </script>
</body>
</html>

效果展示：

原生图片懒加载

wyc_ok

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 实现图片懒加载

在HTML中，为要进行懒加载的图片元素添加一个占位符，通常是一个小尺寸的透明图片或者一个简单的`<div>`元素。- 为每个要懒加载的图片元素添加一个自定义数据属性，例如`data-src`，用于存储原始图片的`src`属性的值。实现图片懒加载的思路是延迟加载页面中的图片，只有当用户滚动到图片可见区域时才加载图片，以减少初始页面加载时间和网络带宽的使用。- 当图片进入可见区域时，通过JavaScript将`data-src`属性的值设置为`src`属性，从而加载原始图片。这会触发浏览器下载图片。
复制链接

扫一扫