检查背景图片是否已加载完成

Question

这是我的代码:

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

当背景图片加载完成时，这里的load事件似乎从未触发。我应该捕获哪个事件以知道背景何时已加载？

- Randomblue

Answer 1

根据 @variant 的说法，为了避免图片的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();
}

- Esailija

---

图片的onload事件有时候不会触发，即使使用jQuery的.load()方法也是如此？您能否详细说明一下这个问题？ - Randomblue

当你在一个div上调用“.load()”函数时，它会发起一个与你的问题完全无关的ajax调用：http://api.jquery.com/load/。如果图像已经在缓存中，则`img.onload`函数通常不会自动触发，因此需要显式调用该函数。 - Esailija

Answer 2

这里没有可捕获的事件。

您可以使用IMG标签预加载图像并监听其load事件。当它被触发时，将具有背景图片的DIV附加到DOM中。该图像已经在浏览器缓存中，加载将是瞬间完成的。

- Variant