在特定圖像加載後執行功能

Question

我有一個低分辨率的.jpeg圖像傳送帶，在所有.gif文件加載完成後（大約需要10秒），這些傳送帶會被更大的.gifs替換。下面的代碼替換所有的.jpeg文件與.gif文件：

$(window).bind("load", function() { 

$('#carousel-example-generic > .carousel-inner > .item > div[rel]').each(function() { 
     var rel = $(this).attr('rel'); 
     var self = $(this); 
     var img = new Image(); 
     $(img).load(rel, '', function() { 
     self.css('background-image', 'url('+rel+')'); 
     }); 
    }); 

}); 

我想，而不是其儘快個別.gif注意加載相應.gif注意更換，而不是僅僅等待每個.JPG，整個頁面加載。

對個人旋轉木馬項目的HTML看起來像這樣：

<div style="background:url('whatever.jpg')" rel="background:url('whatever.gif')"></div> 

在我怎樣才能做到這一點有什麼建議？

Answer 1

取出window.onload處理器，並使用onload處理每個圖像，而不是

$('#carousel-example-generic > .carousel-inner > .item > div[rel]').each(function() { 
    var self = $(this); 
    var rel = self.attr('rel'); 
    var img = new Image(); 

    img.onload = function() { 
     self.css('background-image', 'url(' + rel + ')'); 
    } 

    img.src = rel; 

    if (img.complete) img.onload(); // IE cache "hack" 
}); 

，並確保您更改HTML到

<div style="background:url('whatever.jpg')" rel="whatever.gif"></div>