一、什么是懒加载？
懒加载突出一个“懒”字，就是延迟的意思，所以懒加载说白了就是延迟加载的意思。
二、为什么要懒加载？
懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片是一直影响网页性能的元凶。如果每次进入页面就请求所有的图片资源，那么有可能等图片加载完，用户早已经走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。
三、懒加载实现的原理
由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图片资源而言的，所以这里的实现原理主要是针对图片。
大家都知道，一张图片就是一个<img>标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。
既然这样，那么我们就要对<img>标签的src属性下手了，在没进入可视区域的时候，我们先不给这个<img>标签赋src属性，这样岂不是浏览器就不会发送请求了。
总结：我们知道了从<img>标签下手，那么更重要的就是可视区域的判断了，这就是整篇文章的核心之处了。
<body>
<img data-src="image/img1.jpg">
<img data-src="image/img2.jpg">
<img data-src="image/img3.jpg">
<img data-src="image/img4.jpg">
</body>img {
display: block;
width: 100%;
height: 550px;
margin-bottom: 20px;
}<script>
var imgs = document.querySelectorAll('img');
function getTop(e){
// offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
var T = e.offsetTop;
while(e = e.offsetParent) {
T += e.offsetTop;
}
return T;
}
function lazyLoad(imgs) {
// 获取可视高度
var H = document.documentElement.clientHeight;
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');
}
}
}
// onscroll()在滚动条滚动的时候触发
window.onload = window.onscroll = function () {
lazyLoad(imgs);
}
</script>
四、预加载
在一些需要大量展示图片的网站，实现图片的提前加载。从而提升用户体验。常用的方式有两种，一种是隐藏在css的background的url属性里面，一种是通过javascript的iamge对象设置的实例的src属性实现图片预加载。
1373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
