js实现懒加载原理
概念：对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。
原理：当图片元素的偏移高度<=设备高度+滚动条与顶部的距离,即
img.offset().top <= window.height() + window.scrollTop();
图片：
时，使用html5中的data-属性作为暂存器， 给图片的src赋值上自定义属性data-lazyload的真实路径：
<img src="loading.gif" data-lazyload="img.jpg">
直接上一个完整的demo吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>懒加载</title>
</head>
<body>
<div class="img">
<img src="https://dpic1.tiankong.com/jt/7l/QJ7100510973.jpg@!350h" alt="">
<img src="./img/th.png" data-lazyload="https://dpic3.tiankong.com/67/cn/QJ6226943363.jpg@!350h">
<img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/zt/sg/QJ6235849453.jpg@!350h">
<img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/ul/ac/QJ6479383109.jpg@!350h">
<img src="./img/th.png" data-lazyload="https://dpic2.tiankong.com/1z/kb/QJ6401246638.jpg@!350h">
<img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/ut/zj/QJ6634256101.jpg@!350h">
<img src="./img/th.png" data-lazyload="https://dpic.tiankong.com/09/jh/QJ6635714192.jpg@!350h">
<img src="./img/th.png" data-lazyload="https://dpic3.tiankong.com/6k/i5/QJ6727412259.jpg@!350h">
<img src="./img/th.png" data-lazyload="https://dpic2.tiankong.com/av/fc/QJ6872601378.jpg@!350h">
<img src="./img/th.png" data-lazyload="https://dpic.tiankong.com/37/1u/QJ7100086664.jpg@!350h">
<img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/jt/7l/QJ7100510973.jpg@!350h">
</div>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// 第一次加载
getImg()
var clock; // 设置一个延时函数节流
$(window).on('scroll', () => {
if (clock) {
// 如果拉动滚动条时，延时函数还未执行完，则清除
clearTimeout(clock);
}
clock = setTimeout(() => {
getImg();
}, 2000)
})
function getImg() {
// 返回没有data-isLoaded的img标签
// [1,2,3].not(1) => 返回不含有1的数组 [2,3]
$('.img img').not('[data-isLoading]').each((index,item) => {
if(isShow(item)) loading(item);
})
}
function isShow(img) {
return $(img).offset().top <= $(window).height() + $(window).scrollTop()
}
function loading(img) {
// 给图片的src赋值上自定义属性data-lazyload的真实路径：
$(img).attr('src', $(img).attr('data-lazyload'));
// 为已经加载的图片加一个标识，上面遍历图片的时候就会跳过已经加载了的图片
$(img).attr('data-isLoaded', 1);
}
</script>
