js实现图片懒加载

Posted 2020-10-10 CSS is awesome

大型购物网站都会采用图片懒加载技术来优化网站首页打开速度，以提高用户体验，那么具体是怎么实现的呢，我们一探究竟。

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);

漫长的国庆假期结束了，明天又要上班了，继续撸代码。