JS实现图片延迟加载（lazyload改编）
为什么改写JS版：
移动端做运营活动到时候经常需要用到大量的图片，图片过多导致加载过慢，用户体验差，插件lazyload.js需要依赖JQuery,单页面如果需要采用这个插件需要加载JQuery，JQuery.min也有80多kb，为了一个功能需要引入一个80多kb的文件，得不偿失。
场景：
网页使用大量图片的时候，由于图片资源过大会导致加载时间大幅度延长
作用：
缩短第一次加载网页的时间，让网页尽快呈现在用户眼前。
原理：
先加载可视区的图片，剩余图片由滚动条来决定是否需要加载。
前期准备：
1px像素的图片一张（不带任何东西的png图片：p.png），作用：防止img标签中没有图片地址导致该位置在不同浏览器中的呈现不同，例如有些浏览器出现X的标志
实现步骤：
1：不在可视区的图片用1px的p.png图片替代显示。
var windowH=document.documentElement.clientHeight;//可视区高度
imgs=document.getElementsByTagName('img');
imgTop=imgs[i].offsetTop;//图片距离顶部高度
scTop=document.documentElement.scrollTop || document.body.scrollTop;//滚动条高度
条件：imgTop-windowH<scTop && imgTop-windowH>0 //需要加载图片
条件成立则将该图片的 data-url地址赋给 src地址
<img src="img_06.png" data-url="img_06.png" alt=""/>
代码：
html:
<div>
<img src=" img_01.png " alt=""/>
<img src=" img_02.png " alt=""/>
<img src=" img_03.png " alt=""/>
<img src="p.png" alt="" data-url="img_04.png"/>
<img src="p.png" alt="" data-url="img_05.png "/>
<img src="p.png" alt="" data-url="img_06.png "/>
<img src="p.png" alt="" data-url="img_07.png "/>
</div>
js:
window.onload=function () {
var windowH,//可视区高度
imgs,
imgTop,
dataUrl,
scTop;//滚动条高度
windowH=document.documentElement.clientHeight;
imgs=document.getElementsByTagName('img');
window.onscroll= function () {
scTop=document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<imgs.length;i++){
imgTop=imgs[i].offsetTop;//图片距离顶部高度
if(imgTop-windowH<scTop &&imgTop-windowH>0 && imgs[i].getAttribute("data-url")!=imgs[i].getAttribute("src")){
dataUrl=imgs[i].getAttribute("data-url");
imgs[i].setAttribute("src",dataUrl);
}
}
}
}
不足：
1：每次滚动都需要计算，消耗性能
2：排除的首屏图片，但是不同的电脑高度不一样，所以不知道需要排除几张作为首屏图片（处理：按需求自己设置）