图片懒加载

$(function(){
    $('img').each(function(index, image){
        if(!image || !image.src) return;

        const img = new Image();
        img.src = image.src;
        image.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
        img.onload = function(){
            image.src = img.src
        };
        img.onerror = function(){
            image.src = null;
        };
    });
})

另外一种情况是滚动页面进入可视区域后加载图片，暂时不写，有时间补上。

值得注意的是，如果这里用document.getElementsByTag('img')是无法缓存的，页面渲染的时候如果这个图片去掉了会导致替换错误的位置。如下：

const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
    // 如果用该方法，需要用一个变量来缓存查找结果，后面的替换都用这个变量
    // 如： const image = images[i];
    if (!images[i] || !images[i].src) continue;

    const img = new Image();
    img.src = images[i].src;
    images[i].src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
    img.onload = function () {
        images[i].src = img.src
    };
    img.onerror = function () {
        images[i].src = null;
    };
}

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/f0e261b6.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！