已解决
JS 实现图片懒加载
来自网友在路上 178878提问 提问时间：2023-10-14 04:34:03阅读次数： 78
最佳答案 问答题库788位专家为你答疑解惑
实现图片懒加载的思路是延迟加载页面中的图片，只有当用户滚动到图片可见区域时才加载图片，以减少初始页面加载时间和网络带宽的使用。以下是实现图片懒加载的一般思路：
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>效果展示：
原生图片懒加载
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"JS 实现图片懒加载"：http://eshow365.cn/6-19377-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！