js懒加载
图片懒加载指的是在浏览过程中随着需要才被加载出来，例如某宝上面浏览商品时，会伴随很多的图片，如果一次全部加载出来的话，显然资源有些浪费，并且加载速度也会相对降低，那么懒加载的实现很重要。即随着浏览翻阅时，下面的图片才被加载出来，这样又不浪费带宽，访问网页速度也很快，用户体验也会有所提升。
说了这么多，其实所需要注意的要点有：
1. 屏幕可视区域的高度
2. 每张图片在文档中的高度
3. 图片符合要求进行加载时，将图片地址赋值给属性 src
4. 对屏幕滚动事件进行监控
5. 首次进入网页未滑动屏幕时要显示的图片
要测试图片懒加载效果，可以在Chrome浏览器的控制台选择“Network”，把“Online”改为“Slow 3G”就可以模拟慢速网络下浏览器懒加载图片的效果
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript图片懒加载实现</title>
<style>
p{
border:2px solid red;
}
img{
width: 300px;
height:100px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div>
<p><img src="" data-original="./images/0.jpg" /></p>
<p><img src="" data-original="./images/1.jpg" /></p>
<p><img src="" data-original="./images/2.jpg" /></p>
<p><img src="" data-original="./images/3.jpg" /></p>
<p><img src="" data-original="./images/4.jpg" /></p>
<p><img src="" data-original="./images/5.jpg" /></p>
<p><img src="" data-original="./images/6.jpg" /></p>
<p><img src="" data-original="./images/7.jpg" /></p>
<p><img src="" data-original="./images/8.jpg" /></p>
<p><img src="" data-original="./images/9.jpg" /></p>
<p><img src="" data-original="./images/10.jpg" /></p>
<p><img src="" data-original="./images/11.jpg" /></p>
<p><img src="" data-original="./images/12.jpg" /></p>
<p><img src="" data-original="./images/13.jpg" /></p>
<p><img src="" data-original="./images/14.jpg" /></p>
<p><img src="" data-original="./images/15.jpg" /></p>
<p><img src="" data-original="./images/0.jpg" /></p>
<p><img src="" data-original="./images/1.jpg" /></p>
<p><img src="" data-original="./images/2.jpg" /></p>
<p><img src="" data-original="./images/3.jpg" /></p>
<p><img src="" data-original="./images/4.jpg" /></p>
<p><img src="" data-original="./images/5.jpg" /></p>
<p><img src="" data-original="./images/6.jpg" /></p>
<p><img src="" data-original="./images/7.jpg" /></p>
<p><img src="" data-original="./images/8.jpg" /></p>
</div>
<script>
var wHeight=document.documentElement.clientHeight ;//获取屏幕可视高度
var imgs=document.querySelectorAll("img");
imgs.forEach(function(item,idx){
//getBoundingClientRect().top
var ownHeight=item.getBoundingClientRect().top;//获取当前图片在文档中的位置
if(ownHeight<=wHeight){
item.src=item.getAttribute("data-original")
}
})
window.οnscrοll=function(){//添加屏幕滚动事件
imgs.forEach(function(item,idx){
var hasSorollTop=window.scrollY;//获取屏幕已滚动高度
var ownHeight=item.getBoundingClientRect().top;//获取当前图片在文档中的位置
console.log(hasSorollTop)
if(ownHeight<=(hasSorollTop+wHeight)){
//当图片在屏幕滚动时，当图片在文档中的位置小于屏幕已滚动高度+屏幕可视高度的时加载此图片，
item.src=item.getAttribute("data-original")
}
})
}
</script>
</body>
</html>
