图片延迟加载策略（JavaScript）

不管是在移动端开发还是在PC端开发，基本都会用到图片的懒加载，这其中最大的原因就是为了保证页面打开的速度（正常情况下3秒之内如果首页打不开，就已经算是死亡时间了）。

延迟加载的的基本做法一般是这样的：

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

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

扩展：对于数据的异步加载，也是这样的，并不会一次性把页面中所有的数据都请求出来，正常情况是先请求前两屏的数据，后面的数据先不请求，当页面滚动到对应区域的时候，再重新请求数据，接着绑定渲染数据。

一、首屏单张图片延迟加载

html

css

* {margin: 0; padding: 0; font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif; font-size: 14px;}
img {display: block;border: none;}
#banner {margin: 10px auto; width: 350px; height: 200px; border: 1px solid green; background: url("img/default.gif") no-repeat center center #e1e1e1; }
#banner img {display: none; width: 100%;height: 100%;}

在设置样式的时候，把默认的图片设置给img外层的div，作为div的背景，因为要延迟加载，所以一开始给src的属性值是空，这样的话在IE浏览器当中会显示一张碎图，不美观，所以我们让其默认是隐藏的，当真实的图片加载完成后，再显示。

JavaScript
在没有想其他情况的时候，我们可能会很简单的就把JavaScript代码写成以下这样：

var banner = document.getElementById('banner') , imgFir = banner.getElementsByTagName('img')[0];

imgFir.src = imgFir.getAttribute('trueImg');
imgFir.style.display = 'block';

但是以上处理是不完整的：如果我们获取的真实图片地址是错误的，当赋值给IMG的src属性的时候，不仅控制台会报错，而且页面中会出现碎图/叉子图，影响视觉效果。所以我们获取图片的地址后，应该先验证地址的有效性，是有效的才赋值，不是有效的是不进行赋值处理的。

var oImg = new Image; // 创建一个临时的img标签
oImg.src = imgFir.getAttribute('trueImg');
oImg.onload = function () { // 当图片能够正常加载
    imgFir.src = this.src;
    imgFir.style.display = 'block';
    oImg = null;
}

二、超过一屏的单张图片延迟加载

超过一屏的单张图片.png

A：图片容器距离body的上偏移 + 容器的offsetHeight

B：浏览器一屏幕的高度 + 滚动条卷去的高度

所以判断的条件就是：A < B 容器就已经完全的进入了视野，加载真实的图片。

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 < B) {
        console.log('ok');
        // 当条件成立，加载真实的图片，第一次加载完成后，再让页面继续滚动的过程中，A

本例中用到的utils工具类中的offset方法和win方法：

function offset(curEle) {
    var disLeft = curEle.offsetLeft, disTop = curEle.offsetTop, par = curEle.offsetParent;
    while (par) {
        if (navigator.userAgent.indexOf("MSIE 8") === -1) {
            disLeft += par.clientLeft;
            disTop += par.clientTop;
        }
        disLeft += par.offsetLeft;
        disTop += par.offsetTop;
        par = par.offsetParent;
    }
    return {left: disLeft, top: disTop};
}

function win(attr, value) {
    if (typeof value === "undefined") {
        return document.documentElement[attr] || document.body[attr];
    }
    document.documentElement[attr] = value;
    document.body[attr] = value;
}

多张图片延迟加载

本例为移动端的情况，有一个列表，超过屏幕好几屏

---

个人公众号（icemanFE）：分享更多的前端技术和生活感悟

个人公众号.png