javascript 如何在一段时间后取消图像加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8659364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to cancel an image load after a period of time?
提问by Austin Burk
I need to be able to cancel an image load after a set period of time, and it needs to subsequently call the onError action.
我需要能够在设定的时间段后取消图像加载，并且它需要随后调用 onError 操作。
What it will do:
它将做什么：
Attempt to retrieve the resource. src="https://www.site.com/cgi-bin/pullimg.cgi?user=+encodeURI(document.cookie) , which pulls a user-specific resource. The cookies are stored in a protected folder.
尝试检索资源。src="https://www.site.com/cgi-bin/pullimg.cgi?user=+encodeURI(document.cookie) ，它拉取用户特定的资源。cookie 存储在受保护的文件夹中。
If it can't in 1 second (1000 ms), then execute onError.
如果在 1 秒（1000 毫秒）内不能，则执行 onError。
onError changes the images src attribute, then reloads the img. (Changes to different uri, like mirror.site.com/err.png)
onError 更改图像 src 属性，然后重新加载 img。（更改为不同的 uri，如 mirror.site.com/err.png）
Also, it can be a javascript function (newImage).
此外，它可以是一个 javascript 函数 (newImage)。
Sorry for not supplying existing code; I cancode in multiple langs though.
抱歉没有提供现有代码；我可以用多个语言编码。
回答by Yaniro
Try this:
试试这个：
var image = new Image();
image.src = "https://www.site.com/cgi-bin/pullimg.cgi?user=" + encodeURI( document.cookie );
setTimeout
(
function()
{
if ( !image.complete || !image.naturalWidth )
{
image.src = "http://mirror.site.com/err.png";
}
},
1000
);
回答by jfriend00
You can use this code to load an image and, if not successfully loaded within 1 second (whether the failure is via onerror, onabort or from the time elapsing), switch to load an alternate image.
您可以使用此代码加载图像，如果在 1 秒内未成功加载（无论失败是由于 onerror、onabort 还是由于时间流逝），请切换到加载备用图像。
function loadImage(url, altUrl) {
var timer;
function clearTimer() {
if (timer) {? ? ? ? ? ? ? ?
clearTimeout(timer);
timer = null;
}
}
function handleFail() {
// kill previous error handlers
this.onload = this.onabort = this.onerror = function() {};
// stop existing timer
clearTimer();
// switch to alternate url
if (this.src === url) {
this.src = altUrl;
}
}
var img = new Image();
img.onerror = img.onabort = handleFail;
img.onload = function() {
clearTimer();
};
img.src = url;
timer = setTimeout(function(theImg) {
return function() {
handleFail.call(theImg);
};
}(img), 1000);
return(img);
}
// then you call it like this
loadImage("https://www.example.com/cgi-bin/pullimg.cgi?user=" + encodeURI(document.cookie), "http://mirror.site.com/err.png");
回答by Emmanuel N
Use window.stop to stop download
使用 window.stop 停止下载
if(window.stop !== undefined)
{
window.stop();
}
else if(document.execCommand !== undefined)
{
document.execCommand("Stop", false);
}
To change image source
更改图像源
var img = document.getElementBYId("yourImageID");
img.setAttribute("src","newSource.gif");
