在特定图像加载后执行功能

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>