图片加载二三事

预加载

预加载可将图片预先加载到浏览器中，保证图片快速显示。
该方式适用于首屏轮播图、图库等场景，可通过设定恰当的预加载时机，起到很好的效果。

js实现

for (var i = imgs.length - 1; i >= 0; i--) {
    var imgObj = new Image();
    imgObj.src = imgs[i];
}

ajax实现

该方法利用DOM，不仅仅可以预加载图片，还能预加载CSS、JS。其优越之处在于JavaScript和CSS的加载不会影响到当前页面。

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000); // 1000毫秒是为了防止脚本挂起，而导致正常页面出现功能问题
};

懒加载

懒加载可将图片延时加载，通常使用于图片较多且分布于整个网页的场景下。

分类

懒加载可以分为——

• 延时加载
  使用setTimeout或setInterval进行加载延迟。
• 条件加载
  符合或者用户触发了某些条件，才开始异步加载。
• 可视区域加载
  仅加载用户可以看到的区域。

可视区域加载

实现原理是先把图片地址存储在img的自定义属性中，等到图片出现在可视区域内时，将自定义属性里的地址赋给src。

var imgs = document.querySelectorAll('img'); // 获取图片
var len = imgs.length; // 图片数量
var n = 0; // 存储图片加载到的位置，避免每次都从第一张图片开始遍历
window.onscroll = function() {
    var visibleH = document.documentElement.clientHeight; // 可视高度
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    for (var i = n; i < len; i++) {
        if (imgs[i].offsetTop < visibleH + scrollTop) {
            if (imgs[i].getAttribute('src') == '') {
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
            n = i + 1;
        }
    }
};

响应式图片

在逛XMind官网的时候无意中发现一个srcset属性。

<img src="src1.png" srcset="src2.png 2x, src3.png 3x" title="title-preview-zen-web" alt="img-preview-zen-web">

查阅了一下资料，发现该属性可以以最合适的src去匹配不同屏幕，2x/3x 表示目标屏幕的像素密度。

还有下面这种用法，400w/600w表示目标浏览器的宽度的限度，如浏览器宽度550w时，匹配600w的src。

<img src="source.jpg" width="100%"
  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

参考

• 伯乐在线 — Javascript图片预加载详解