图片延迟加载

网站性能优化：尽量减少向服务器请求的次数 “减少HTTP请求”：

a、CSS/JS文件进行合并
b、ICON图片也进行合并--->雪碧图
c、图片的延迟加载
d、数据的异步加载
e、在移动端，若做一个“简单的”宣传页，尽量把js和css写成内嵌式

图片延迟加载

作用：

保证页面打开的速度（3s之内如果首页打不开就死了）

网站性能优化：尽量减少向服务器请求的次数 “减少HTTP请求”。（CSS/JS文件进行合并

原理：

a、对于首屏内容中的图片：首先给对应的区域一张默认图片占着位置（默认图需要非常小，一般可以维持在5kb以内），当首屏内容都加载完成后（或者也可以给一个延迟的时间），再开始加载真实的图片

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

扩展：数据的异步加载，开始只把前两屏的数据加载绑定出来，后面的数据不进行处理，当页面滚动到对应区域的时候再重新请求数据然后绑定渲染数据
——————————————————————————————————
首屏延迟图片加载：

//html部分：img标签外要有个包裹容器
<div id="wrap">
    <img src=""  trueImg="img/1.png" />
</div>
//css部分：外层包裹容器设置背景默认图片；img的src为空，加载时浏览器会出现碎图，所以先隐藏，加载完真实图片后再取消隐藏
#wrap{
     background:url(img/2.png) no-repeat center center;
}
img{
     display:none;
}
//js部分
window.setTimeout(function(){
     var oImg=new Image;//创建一个临时img标签
     oImg.src=img.getAttribute("trueImg");
     oImg.onload=function(){//代表真实图片能够正常加载
          img.style.display="block";
          img.src=this.src;
          oImg=null;
     } 
},500);

——————————————————————————————————
其他屏的单张图片延迟加载：
原理：

image.png

window.onscroll=function(){
   if(wrap.isLoad){//已经加载过了
       return;
   }
   var A=wrap.offsetHeight+wrap.offsetTop;
   var B=document.documentElement.clientHeight||document.body.clientHeight+document.documentElement.scrollTop||document.body.scrollTop;
   if(A<B){
   //当条件成立，加载真实的图片，第一次加载完成后，在让页面继续滚动的过程中，A<B一直成立，又重新执行下面的操作，导致重复给一个容器中的图片进行加载
       var oImg=new Image;
       oImg.src=img.getAttribute("trueImg");
       oImg.onload=function(){
          img.src=this.src;
          img.style.display="block";
          oImg=null;
       };
       wrap.isLoad=true;//设置一个自定义属性，告诉浏览器已经把图片加载完了(不管是否正常加载，只要处理过一次以后都不再处理了)
   }
}