大型购物网站都会采用图片懒加载技术来优化网站首页打开速度，以提高用户体验，那么具体是怎么实现的呢，我们一探究竟。
html结构（div包裹一层用来显示背景图片，等待图片加载完成后，显示真实图片）
<div class="box" id="box"> ???<img src="" trueImg="img/timg.jpg" /></div>
css样式（通常会用一张体积很小的图片来当作背景图，先隐藏图片，显示背景图，等图片加载完成之后，再把它显示出来）
* { ???margin: 0; ???padding: 0;}.box { ???width: 200px; ???height: 200px; ???background: #eee url(img/timg.gif) no-repeat center center; ???background-size: 50px 50px;}.box img { ???width: 100%; ???height: 100%; ???display: none;}js核心代码（主要原理就是在图片元素上增加自定义属性存放真实图片地址，通过new出来的Image对象的onload事件来确定图片已经加载完成，然后再把图片地址赋值给img标签即可）
1 function lazyLoad() { 2 ????var oDiv = document.getElementById("box"); 3 ????var imgEle = oDiv.firstElementChild; 4 ????var imgSrc = imgEle.getAttribute("trueImg"); 5 ?6 ????var oImg = new Image(); 7 ????oImg.src = imgSrc; 8 ????oImg.onload = function() { 9 ????????imgEle.src = this.src;10 ????????imgEle.style.display = "block";11 ????}12 ????oImg=null;13 }14 15 setTimeout(lazyLoad, 2000);漫长的国庆假期结束了，明天又要上班了，继续撸代码。
js实现图片懒加载
原文地址：http://www.cnblogs.com/zt123123/p/7638321.html