jquery - 使用回调和超时选项预加载远程图像

Question

我有一个 Instagram 图像（缩略图），当您单击它时，它将加载全尺寸图像并从缩略图位置扩展。

我现在使用下面的代码，它可以工作，但我也需要超时，所以如果它没有加载，我会继续使用我的网站的自动播放性质。

var image = $("<img />").attr("src", imageUrl + "?" + new Date().getTime());
$(image).load(function(){
    // Expanding image code here
}

据我尝试，我无法使用普通的 ajax 调用，因为我正在从另一个网站调用 url，而 JSONP 也不起作用。

有什么想法可以让它发挥作用吗？

Answer 1

有一个由 Desandro 编写的插件，它可能对你有用： https ://github.com/desandro/imagesloaded

它允许您为损坏的图像指定不同的事件。当然，这取决于您是要等待图像加载还是在 X 秒内未加载时将其标记为已损坏。

Answer 2

您可以使用setTimeout和load事件竞赛。无论哪个先触发都会取消另一个：load侦听器被取消.off("load")，超时被取消clearTimeout：

var image = $("<img />").attr("src", imageUrl + "?" + new Date().getTime());

var myTimeout = setTimeout(function() {
    // failure behavior

    // we consider load a failure; remove the listener
    $(image).off("load");
}, 10000);

$(image).on("load", function(){
    // Expanding image code here

    // we've succeeded, remove the failure timeout
    clearTimeout(myTimeout);
});