懒加载 js----例子------图片
转载自：https://www.jianshu.com/p/9b30b03f56c2
懒加载工具类
<script type="text/javascript">
//懒加载工具方法
function lazyload(idName) {
var imgs;
if (idName == "container") {
imgs = document.getElementById('container').querySelectorAll('img');
}
H = window.innerHeight;
var lazyFunc=function () {
var S = document.documentElement.scrollTop || document.body.scrollTop;
[].forEach.call(imgs, function (img) {
if (!img.getAttribute('data-src')) {
return
};
if (H + S + 200 > getTop(img)) {
img.src = img.getAttribute("data-src");
img.removeAttribute("data-src");
}
})
};
window.onload = window.onscroll = lazyFunc;
window.onscroll = lazyFunc;
lazyFunc();
function getTop(e) {
var T = e.offsetTop;
while (e = e.offsetParent) {
T += e.offsetTop;
}
return T;
};
};
lazyload("container");//执行懒加载，可以哪里需要哪里再加
</script>
结束。
原理：就是当图片出现在浏览器可视区域中时，再把图片的url传给它，也可以在这个时候创建图片，而图片被包裹在一个容器中，比如li或div，图片的url放在其容器的自定义属性data-src中；
document.documentElement.clientWidth //屏幕宽 375
document.documentElement.clientHeight //屏幕高 667
document.documentElement.scrollTop //左上角到html鼎高 当前视线元素划上去了多少，也就是当前00原点到页鼎html元素的高度 最底端3457
document.documentElement.scrollHeight //4124 总页高
window.innerHeight //667
window.innerWidth //375
判定其加载条件是，当图片距离页面顶端的距离小于浏览器滚动距离加上可视区域高度，即它出现在可视区域时，就加载它；
- 获取图片距离页面顶端的高度利用offsetTop计算出其距离offsetParent的高度，再循环叠加，最终获取到其距离页面顶端的高度：
//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部 function getTop(e) { var T = e.offsetTop; while(e = e.offsetParent) { T += e.offsetParent; } return T; } 作者：MatthewMaYao 链接：https://www.jianshu.com/p/9b30b03f56c2 來源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
- 可视区域高度为
var H = window.innerHeight;
- 滚动距离为
var S = document.documentElement.scrollTop || document.body.scrollTop;
然后定义赋值函数
function lazyLoad(imgs) { var H = window.innerHeight; var S = document.documentElement.scrollTop || document.body.scrollTop; for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src'); } } } 作者：MatthewMaYao 链接：https://www.jianshu.com/p/9b30b03f56c2 來源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
最后在把页面滚动函数赋值给元素window.onload，在所有元素加载完以后再进行操作，这一步很重要！
window.onload = window.onscroll = function () {
lazyLoad(imgs);
}
全部代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片懒加载</title> </head> <style> img { display: block; } </style> <body> <div> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> <img src="" data-src="images/girl1.jpg" alt="图片"> </div> </body> <script type="text/javascript"> var imgs = document.querySelectorAll('img'); //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部 function getTop(e) { var T = e.offsetTop; while(e = e.offsetParent) { T += e.offsetParent; } return T; } function lazyLoad(imgs) { var H = window.innerHeight; var S = document.documentElement.scrollTop || document.body.scrollTop; for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src'); } } } window.onload = window.onscroll = function () { lazyLoad(imgs); } // var imgs = document.body.querySelectorAll('img'), // H = window.innerHeight; //浏览器视窗高度 // function lazyload() { // var S = document.documentElement.scrollTop || document.body.scrollTop; //滚动条滚过高度 // [].forEach.call(imgs, function (img) { // if (!img.getAttribute('data-src')) { // return // } //已经替换过的跳过 // if (H + S - 200 > getTop(img)) { //为达到演示效果，这里H+S减去200，延后加载时机 // img.src = img.getAttribute("data-src"); // img.removeAttribute("data-src"); // } // }); // [].every.call(imgs, function (img) { // return !img.getAttribute('data-src') // }) && (window.removeEventListener("scroll", lazyload, false)); //完成所有替换后注销事件 // // } // // window.addEventListener("scroll", lazyload, false); // window.addEventListener("load", lazyload, false); // // function getTop(e) { // var T = e.offsetTop; // while (e = e.offsetParent) { // T += e.offsetTop // } // return T // } </script> </html> 作者：MatthewMaYao 链接：https://www.jianshu.com/p/9b30b03f56c2 來源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
结束。
