懒加载工作原理
1.1-懒加载介绍（以图片懒加载为例）
1.为什么要有懒加载技术
（1）img标签特点：不管图片隐藏还是显示 有src属性都会去加载 例如电商类网站，一个页面有几百张图片。有时候假设用户不滚动，也会加载图片资源，此时非常损耗网页性能
（2）那么如果页面上有太多的图片 而且有些图片不在可视窗口内 如果加载了会影响页面的渲染页面时间。 判断网页是否使用图片懒加载技术：滚动网页的时候，图片会动态加载（一般会有一个渐变动画，例如京东）
2.如何实现懒加载技术
核心原理：延迟加载： 当图片进入可视区域内容的时候才去加载
实现思路
1.将图片真实资源放入一个自定义属性中
自定义属性作用：存储图片路径，此时图片不会加载
2.监听页面滚动条事件
3.判断图片是否进入页面可视区域
4.取出图片的自定义属性，赋值给图片的src属性（此时真正加载图片资源）
- 示例代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1000px;
margin: 0 auto;
}
ul li {
width: 230px;
height: 230px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
ul li.last {
margin-right: 0;
}
ul li img {
width: 100%;
height: 100%;
display: block;
opacity: 0;
/* 过渡动画 */
transition: all 5s linear;
}
</style>
</head>
<body>
<!-- 假设上面的内容高度1000px -->
<div style="height: 1000px;;background-color: rgba(200, 111, 111, 0.5)"></div>
<ul id="ul1">
<li><img data-src="http://img.daimg.com/uploads/allimg/160324/1-160324232117.jpg" alt=""></li>
<li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01P0.jpg" alt=""></li>
<li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li>
<li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li>
</ul>
<script>
/* 懒加载工作原理 */
//0. 将图片的资源放入自定义属性中（例如data-src）
//1.监听页面滚动条事件
window.onscroll = function(e){
console.log(document.scrollTop + document.clientHeight);
//2.如果图片进入可视区域（假如400px）,则取出自定义属性，赋值给src属性（真正加载）
//ul是否进入可视区域 ： 滚动条距离 + 页面可视区域高度 > 盒子高度
if(document.documentElement.scrollTop + document.documentElement.clientHeight > 1000){
var imgList = document.querySelectorAll('li>img');
for(var i = 0;i<imgList.length;i++){
imgList[i].style.opacity = 1;//过渡动画
imgList[i].src = imgList[i].getAttribute('data-src');//过渡动画
};
}
};
</script>
</body>
</html>
