Question

这是我的代码：

$('<div>')
    .css('background-image', 'url(' + images[imageToLoad].url + ') no-repeat center center')
    .appendTo('#image-container')
    .hide()
    .load(function () {
        loadedImages.push($(this));
    });

不知何故，load事件在加载背景图片时从未触发。我应该捕获什么事件以了解背景何时加载？

Answer 1

@variant所说的+代码，因为img onload事件并不总是触发：

var img = new Image(),
    div = $( "<div>" ).appendTo( "#image-container").hide();        

img.onload = function(){
    if( this.isLoaded ) {
    return;
    }
this.isLoaded = true;
loadedImages.push( 
    div.css( "background-image", "url('"+this.src+"') no-repeat center center" )
    );
}

img.src = images[imageToLoad].url;

if( ( img.complete || img.readyState === 4 ) && !img.isLoaded ) {
img.onload();
}

Answer 2

此处无法捕获任何事件。

您可以使用IMG标记预加载图片并在其上收听load事件。当它被触发时，将带有background-image的div附加到DOM。图像已经在浏览器的缓存中，加载将是即时的。

检查背景图像是否已加载

2 个答案: