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

时间:2013-08-14 14:15:07

标签: jquery

我有一张Instagram图片(缩略图),当你点击它时,它会加载全尺寸图像,并从缩略图位置展开。

我现在使用下面的代码并且它有效,但我需要暂停,所以如果它没有加载,我继续我的网站的自动播放性质。

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

据我所知,我不能使用正常的ajax调用,因为我从另一个网站调用了一个url而JSONP也无法正常工作。

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

2 个答案:

答案 0 :(得分:0)

您可以使用setTimeoutload事件竞赛。首先触发的另一个取消另一个:使用.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);
});

答案 1 :(得分:0)

这是Desandro编写的插件,它可能对您有用: https://github.com/desandro/imagesloaded

它允许您为损坏的图像指定不同的事件。当然,这取决于您是否要等待图像加载,或者只是在X秒内没有加载时将其标记为已损坏。