Question

我有一个低分辨率.jpeg图像的轮播，在加载了所有的.gif文件后需要用更大的.gif文件替换（大约需要10秒钟）。下面的代码用.gifs替换所有.jpeg文件：

$(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>

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

1 个答案: