如何检查 DOM 及 CSS 中的图片是否加载完毕

为什么80%的码农都做不了架构师？>>>   

• 基于 jQuery，使用下面的代码前请先引入

$(function() {
    imgLoaded({
        // imgsUrl: ['https://www.oschina.net/build/oschina/components/imgs/oschina.svg?t=1484580008000'],
        success: function(img) {
            console.log('image is loaded success.');
        },
        error: function() {
            // console.log('image is loaded failed.');
        }
    });
});

/**
 * 检查图片是否加载完毕
 * @param  {object} params
 *         - params.success 加载成功回调
 *         - params.error 加载失败回调
 *         - params.imgsUrl 需要额外处理的图片地址，比如 css 文件中的图片
 * @return {}
 */
function imgLoaded(params) {
    var bHasSuccessCallback = params && params.success && typeof params.success === 'function';
    var bHasErrorCallback = params && params.error && typeof params.error === 'function';
    var imgdefereds = [];
    $('img').each(function() {
        var dfd = $.Deferred();
        $(this).bind('load', function() {
            dfd.resolve();
        }).bind('error', function(){
            // 图片加载错误，加入错误处理
            // dfd.resolve();
            bHasErrorCallback && params.error();
        });
        if (this.complete) {
            setTimeout(function() {
                dfd.resolve();
            }, 1000);
        }
        imgdefereds.push(dfd);
    })
    $.when.apply(null,imgdefereds).done(function() {
        if (params && params.imgsUrl) { // 如果还要检查 css 中的图片
            var iImgNumbers = params.imgsUrl.length;
            for (var i in params.imgsUrl) {
                var img = new Image();
                img.src = params.imgsUrl[i];
                if (img.complete) { // 图片已经存在于浏览器缓存
                    iImgNumbers--;
                    // callback.call(img);
                    // return; // 直接返回，不用再处理onload事件
                    continue;
                }
                img.onload = function() { // 图片下载完毕
                    // callback.call(img);//将回调函数的this替换为Image对象
                    iImgNumbers--;
                };
                img.onerror = function() { // 不处理 css 中图片文件加载失败
                    bHasErrorCallback && params.error();
                };
            }
            var timer = setInterval(function() {
                if (iImgNumbers === 0) {
                    clearInterval(timer);
                    console.log('all css image is loaded.');
                    bHasSuccessCallback && params.success();
                }
            }, 500);
        } else {
            console.log('all dom image is loaded.');
            bHasSuccessCallback && params.success();
        }
    });
}

转载于:https://my.oschina.net/antsky/blog/1577278