JS实现图片延迟加载（lazyload改编）

为什么改写JS版：

        移动端做运营活动到时候经常需要用到大量的图片，图片过多导致加载过慢，用户体验差，插件lazyload.js需要依赖JQuery,单页面如果需要采用这个插件需要加载JQuery，JQuery.min也有80多kb，为了一个功能需要引入一个80多kb的文件，得不偿失。

场景：

        网页使用大量图片的时候，由于图片资源过大会导致加载时间大幅度延长

作用：

        缩短第一次加载网页的时间，让网页尽快呈现在用户眼前。

原理：

        先加载可视区的图片，剩余图片由滚动条来决定是否需要加载。

前期准备：

       1px像素的图片一张（不带任何东西的png图片：p.png），作用：防止img标签中没有图片地址导致该位置在不同浏览器中的呈现不同，例如有些浏览器出现X的标志

实现步骤：

        1：不在可视区的图片用1px的p.png图片替代显示。

       
        <img src="p.png" data-url="img_06.png" alt=""/>

        2：以滚动条、图片、可视区高度作为条件判断图片是否需要加载，如果需要，则将替换src的图片路径

        
         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.οnlοad=function () {

        var windowH,//可视区高度

            imgs,

            imgTop,

            dataUrl,

            scTop;//滚动条高度

       windowH=document.documentElement.clientHeight;

       imgs=document.getElementsByTagName('img');

        window.οnscrοll= 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：排除的首屏图片，但是不同的电脑高度不一样，所以不知道需要排除几张作为首屏图片（处理：按需求自己设置）