应用场景：
页面加载资源的时候，如果一下子就获取全部的数据资源，在网络条件不好的情况下可能会拖慢页面的加载速度，影响用户体验，那么这个时候就需要懒加载进行性能优化
懒加载（又称延迟加载）：
懒加载的作用在于，我们可以根据用户的交互行为，实现按需加载资源
以下是代码实例：
<body>
<img src="time.gif" data-src="./img/time.jpg">
<img src="time.gif" data-src="./img/time1.jpg">
<img src="time.gif" data-src="./img/time2.jpg">
<img src="time.gif" data-src="./img/time3.jpg">
<img src="time.gif" data-src="./img/time4.jpg">
</body>
<script>
let num = document.getElementsByTagName("img").length;
let img = document.getElementsByTagName("img");
let n = 0;
lazyLoad();
window.onscroll=lazyLoad;
function lazyLoad() {
//可见区域
let seeHeight = document.documentElement.clientHeight;
//滚动区域
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for (let i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "time.gif") {
img[i].src = img[i].getAttribute("data-src");
}
}
n = i + 1;//避免重复加载
}
}
</script>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
