标签：地址 height var null pre 加载 one log add
大型购物网站都会采用图片懒加载技术来优化网站首页打开速度，以提高用户体验，那么具体是怎么实现的呢，我们一探究竟。
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);
漫长的国庆假期结束了，明天又要上班了，继续撸代码。
标签：地址 height var null pre 加载 one log add
原文地址：http://www.cnblogs.com/zt123123/p/7638321.html
