javascript - JS等待CSS背景图片加载

Question

如果那些是经典的 HTML 图像，很容易让 javascript 等待加载某些图像。

但是如果图像作为 CSS backuground-image 加载，我不知道如何做同样的事情!

这可能吗？

jQuery .load() 方法似乎不适用..而且我缺乏想法

Answer 1

它查找具有 src 属性或 backgroundImage css 属性的元素，并在加载它们的图像时调用操作函数。

/**
 * Load and wait for loading images.
 */
function loadImages(images, action){
    var loaded_images = 0;
    var bad_tags = 0;        

    $(images).each(function() {
    //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display"));
        var image = new Image();
        var src = $(this).attr("src");
        var backgroundImage = $(this).css("backgroundImage");            
        // Search for css background style
        if(src == undefined && backgroundImage != "none"){
            var pattern = /url\("{0,1}([^"]*)"{0,1}\)/;                
            src = pattern.exec(backgroundImage)[1];                
        }else{
            bad_tags++;
        }
        // Load images
        $(image).load(function() {
            loaded_images++;                
            if(loaded_images == ($(images).length - bad_tags))
                action();
        })
        .attr("src", src);
    });
}