一、场景：
先只加载可视窗口区域的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。
1、这样减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。
2、减少了同一时间发向服务器的请求数，服务器压力剧减
二、思想：
在写网页<img>标签是并不会将图片的路径放入src属性，而是自定义一个其他的属性src将路径放入这个自定义属性中，那么在加载页面时，这个图片已开始是无法加载的。而当浏览器的可视区移动到此图片上时，将src的路径赋值给src属性，并开始加载。
三、代码实现：
<style>
img{
200px;
height: 200px;
}
</style>
<body>
<!-- 原理： -->
<!-- 滚动条高度+可视区域的高度>图片到文档顶部的距离 -->
<ul>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
<li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
</ul>
</body>
<script>
var imgs = document.getElementsByTagName('img') // 获取所有的imgs标签
var clientH = document.documentElement.clientHeight // 可视区域的高度（是固定的）
// 封装一个函数，获取该元素到文档的距离
function getPos(obj){
var o = {
left:0,
top:0
}
while(obj){
o.left+=obj.offsetLeft
o.top +=obj.offsetTop
obj = obj.offsetParent
}
return o
}
// 滚动时调用的函数
function auto(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 滚动条的高度（处理了兼容）
for(var i = 0;i<imgs.length;i++){
var img = imgs[i]
var t= getPos(img).top
if(scrollTop+clientH>t+400){
img.src = img.getAttribute('_src')
}
}
}
auto()
window.onscroll=auto
</script>