懒加载工作原理
1.1-懒加载介绍（以图片懒加载为例）
1.为什么要有懒加载技术
（1）img标签特点：不管图片隐藏还是显示 有src属性都会去加载 例如电商类网站，一个页面有几百张图片。有时候假设用户不滚动，也会加载图片资源，此时非常损耗网页性能 （2）那么如果页面上有太多的图片 而且有些图片不在可视窗口内 如果加载了会影响页面的渲染页面时间。 判断网页是否使用图片懒加载技术：滚动网页的时候，图片会动态加载（一般会有一个渐变动画，例如京东）2.如何实现懒加载技术
核心原理：延迟加载： 当图片进入可视区域内容的时候才去加载实现思路1.将图片真实资源放入一个自定义属性中 自定义属性作用：存储图片路径，此时图片不会加载 2.监听页面滚动条事件3.判断图片是否进入页面可视区域4.取出图片的自定义属性，赋值给图片的src属性（此时真正加载图片资源）示例代码如下：
<!doctype html><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="/uploads/allimg/160324/1-160324232117.jpg" alt=""></li><li><img data-src="/uploads/allimg/160318/1-16031P01P0.jpg" alt=""></li><li><img data-src="/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li><li><img data-src="/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>
