使用回调和超时选项预加载远程映像

Question

我有一个Instagram图片（缩略图），当您单击它时，它将加载完整尺寸的图片，并从缩略图位置展开。

我现在使用下面的代码，并且可以正常工作，但是我也需要超时，因此，如果无法加载，我将继续使用网站的自动播放功能。

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

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

有什么想法可以使它起作用吗？

Answer 1

您可以使用setTimeout和load事件竞赛。 首先触发的一个会取消另一个触发：使用.off("load")取消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);
});

Answer 2

Desandro为此编写了一个插件，可能对您有用： https : //github.com/desandro/imagesloaded

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