js懒加载和懒执行（你还不知道javascript懒加载实现的原理吗）
js懒加载和懒执行（你还不知道javascript懒加载实现的原理吗）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>懒加载</title> <style type="text/css"> img { display: block; width: 400px; height: 300px; margin-bottom: 30px; } </style> </head> <body> <img src="" data-src="https://himg.pddugc.com/open-gw/2021-07-09/ad94153447520f19fa53d369
懒加载技术在网页中的作用很大，如果不用懒加载，一个网页需要加载数十上百或者更多张照片，会导致服务器压力很大，大大影响网页的加载速度，给用户的体验也很不好，像电商网站需要加载很多商品的图片信息。这个时候我们就需要懒加载来提高用户体验，并且减轻服务器压力，从而提高性能。同时，懒加载作为前端优化网页能行的知识点，在面试中也经常会被问到。因此，掌握懒加载的原理和实现过程很有必要！
它的实现机制是优先加载可视区域的内容，其他部分等进入了可视区域再加载。
具体思路就是：
1、创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src为空；
2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src即可。
具体实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>懒加载</title>
<style type="text/css">
img {
display: block;
width: 400px;
height: 300px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<img src=""
data-src="https://himg.pddugc.com/open-gw/2021-07-09/ad94153447520f19fa53d3693607e370.jpg">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/215725/39/10297/161418/61d84a39Ed919e387/26790f672d7153f2.jpg">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/179260/37/14089/1045955/60ee74b0E064c07b3/49bab496e7221c1a.png">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/163454/9/14462/440022/605ad7a7E2fb984fd/4536d99cf1749aff.jpg">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/112407/33/13952/129414/5f2a5840Eb1af6fcb/f7104413bccecb64.jpg">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/162512/25/26108/117179/61e91d0eE4fcdbd67/084b02f67180cdc6.jpg">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/183289/23/10367/182100/60cff9d1E34451b76/fb9d09fcaa0fcbb2.jpg">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/152977/10/7800/184971/5fc4fdefE2d4b9ac9/94c30aef873cba8e.jpg">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/178845/16/4587/154529/60a1fb0bEff14b958/472de444576a57b5.jpg">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/217555/13/12151/146354/62022136E0920f145/27df416541db231c.jpg">
<img src=""
data-src="https://img14.360buyimg.com/pop/jfs/t1/140600/22/27302/185116/6202213bE7a00ab35/50403aa35a834308.jpg">
<script type="text/javascript">
var img = document.getElementsByTagName('img');
var num = document.getElementsByTagName('img').length;
// 存储图片加载到的位置，避免每次都从第一张图片开始遍历
var n = 0;
// 是否当前容器/页面里的图片加载完成
var isLoadImg = false;
// 可见区域高度
var _clientHeight = document.documentElement.clientHeight;
// 滚动条距离顶部高度
var _scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 监听窗口变化重新计算可视区域
function computedClientHeight() {
// 可视区域高度
_clientHeight = document.documentElement.clientHeight;
}
// 页面加载完毕加载可视区域内的图片
lazyLoad()
function lazyLoad() {
// 获取滚动条距离顶部的高度
isLoadImg = n >= num;
_scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = n; i < num; i ) {
if (img[i].offsetTop < _clientHeight _scrollTop) {
if (img[i].getAttribute('src') == '') {
img[i].src = img[i].getAttribute('data-src');
}
n = i 1
}
}
}
// 节流
function throttle(func wait flag) {
let timerOut = null;
return function () {
if (flag) {
return;
}
if (!timerOut) {
timerOut = setTimeout(function () {
timerOut = null;
func()
} wait)
}
}
}
// 防抖
function debounce(callback delay) {
let timer = null;
return function (arg) {
clearTimeout(timer);
timer = setTimeout(function () {
callback(arg)
} delay)
}
}
// 使用了节流函数，实现了性能较好的懒加载
window.addEventListener('scroll'
throttle(lazyLoad 100 isLoadImg)
)
// 使用防抖优化不断触发的窗口变化
window.addEventListener('resize'
debounce(computedClientHeight 800)
)
</script>
</body>
</html>
效果图：
