Javascript之图片的延迟加载或者懒加载

做用：保证页面打开的速度(3s以内打不开页面，就已经算是死亡页面了)

原理：

    1）对于首屏内容中的图片：首先给对应的区域一张默认图片占着位置(默认图片须要很是小，通常能够维持在5kb之内)，当首屏内容都加载完成后(或者也能够给一个延迟时间)，再开始加载真实图片

    2）对于其余屏中的图片：也是给一张默认的图片占位，当滚动条滚动到对应区域的时候，咱们再开始加载真实的图片

    扩展：数据的异步加载：开始只把前两屏的数据加载绑定出来，后面的数据不进行处理，当页面滚动到对应区域的时候，在从新请求数据，而后绑定渲染数据

首先让img标签中的src为空，让imgdisplay:none；在外面的div上的背景图上面绑定一个背景图片，而后等页面加载完毕以后，在进行加载图片；

使用定时器或者window.onload事件，而后把获取到的url地址绑定到元素img标签上的src上；可是，若是获取的真实图片地址是错误的src地址时，不只控制台会报错，并且页面会出现碎图/叉子图，影响视觉，如下为处理事件

    var oImg = new Image; //建立一个临时的img标签

    oImg.src = 真实的img的src地址

    oImg.onload=function(){  //-> 当图片可以正常加载

        img.src = this.src；

        img.syule.disolay = 'block'；

        oImg = null; //释放空标签

    }

加载其余页面：

    原理：用window.onscroll事件来监制当前事件

    当途中的A的距离<图中B的距离，就表示，该图片已经彻底进入视线内，既能够加载

    window.onscroll = function(){

        if(banner.isLoad){return}  //若是此条件为true，则再也不执行下面的操做；

        var A = banner.offsetHeight + banner.offsetTop,

             B = window.clientHeight + window.scrollTop;

        if(A<B){

            var oImg = new Image;

            oImg.src = 图片的真实地址

            oImg.onload = function(){  当条件成立，第一次加载完成后，页面继续滚动，A<B条件就一直成立，又重新执行了下面的操做，致使了重复加载图片

                真实图片.src = this.src

                真实图片.style.display = 'block';

                oImg = null;

            }

            banner.isLoad = true;

        }

    }

 

多张图片加载：

 

 

网站性能优化：

一、尽可能减小向服务器端请求的次数"减小HTTP请求"

二、css/js文件进行合并

三、ICON图片进行合并->雪碧图/css script

四、图片的延迟加载

五、数据的异步加载

六、在移动端，我国作的是一个简单的宣传页，尽可能的把css和js写成内嵌式