原理:
1）、对于首屏内容中的图片:首先给对应的区域一张默认图片占的位置（默认图需要非常的小，一般可以维持在5kb以内），当首屏内容都加载完成后（或者也可以给一个延迟的时间），我在开始加载真实的图片
2）、对于其他屏中的图片：也是给一张默认的图片占位，当滚动条滚动到对应区域的时候，我们再开始加载真实的图片
扩展：数据的异步加载，开始只把前两屏的数据加载绑定出来，后面的数据不进行处理，当页面滚动到对应区域的时候，在重新请求数据绑定渲染数据
具体可以看一下下图
首屏的延迟加载代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> *{ padding:0; margin:0; font-size:14px; } #banner{ margin:10px auto; width:300px; height:150px; border:1px solid green; background:url('img/default.gif') no-repeat center center;/*给当前的区域加一个默认图占位，告诉用户此处的图片正在加载中*/} #banner img{ display:none;/*在开始的时候img的src属性没有地址，这样的话在ie浏览器中会显示一张碎图，不美观，所以我们让其默认是隐藏的，当真实的图片加载完成后在显示*/width:100%; height:100%; }</style> </head> <body> <div id='banner'> <!--trueimg是当前标签的自定义属性，存储的是真实图片的地址--> <img src="" alt="" trueimg="img/jd.jpg"> </div> <script>var banner = document.getelementbyid('banner'),imgfir = banner.getelementsbytagname('img')[0] window.settimeout(function(){// imgfir.src = imgfir.getattribute('trueimg');// imgfir.style.display = block//以上处理还是不完整的：如果我们获取的真实图片的地址是错误的，赋值给img的src属性的时候，不仅控制台会报错，而且页面中还会出现碎图//获取图片的地址，验证地址的有效性，是有效的才赋值，不是有效的是不进行处理的// var oimg = document.createelement('img')var oimg = new image;//创建一个临时的img标签oimg.src = imgfir.getattribute('trueimg'); oimg.onload = function(){//当图片能够正常加载imgfir.src = this.src; imgfir.style.display = block; oimg = nullconsole.log('加载完成') } console.log('正在加载中...') },500)</script> </body> </html>
多屏单张图片的延迟加载
具体代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> *{ padding:0; margin:0; font-size:14px; } #banner{ margin:10px auto; width:300px; height:150px; border:1px solid green; background:url('img/default.gif') no-repeat center center;/*给当前的区域加一个默认图占位，告诉用户此处的图片正在加载中*/} #banner img{ display:none;/*在开始的时候img的src属性没有地址，这样的话在ie浏览器中会显示一张碎图，不美观，所以我们让其默认是隐藏的，当真实的图片加载完成后在显示*/width:100%; height:100%; }</style> </head> <body> <div id='banner'> <!--trueimg是当前标签的自定义属性，存储的是真实图片的地址--> <img src="" alt="" trueimg="img/jd.jpg"> </div> <script>var banner = document.getelementbyid('banner'),imgfir = banner.getelementsbytagname('img')[0] window.onscroll = function(){if(banner.isload){return; }var a = banner.offsetheight+utils.offset(banner).top;var b = utils.win(clientheight) + utils.win(scrolltop);if(a