Выполнение функции после загрузки определенных изображений

Question

У меня есть карусель изображений с низким разрешением .jpeg, которые заменяются более крупными .gifs после того, как загрузились все .gifs (что занимает около 10 секунд). Приведенный ниже код заменяет все .jpeg файлы с .gifs:

$(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+')'); 
     }); 
    }); 

}); 

Я хотел бы, чтобы вместо того, чтобы заменить каждый .jpg с его соответствующим .gif как только загружается, что отдельные .gif, а не просто ждет всю страницу для загрузки.

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>