如何在一段时间后取消图像加载？ [英] How to cancel an image load after a period of time?

问题描述

我需要能够在一段时间后取消图片加载，并且需要随后调用onError动作。

它会做什么：

尝试检索资源。 src =https://www.site.com/cgi-bin/pullimg.cgi?user=+encodeURI(document.cookie），它提取用户特定资源。Cookie存储在受保护的文件夹中。

如果它不能在1秒内（1000 ms），那么执行onError。

onError更改图像src属性，然后重新加载img。（更改到不同的uri，例如mirror.site.com/err.png）

另外，它可以是一个JavaScript函数（newImage） 。

对不起，没有提供现有的代码;我可以用多个lang代码。

 函数loadImage（url，altUrl）{
 var timer; 
函数clearTimer（ ）{
 if（timer）{
 clearTimeout（time。） r）; 
 timer = null; 
 
 
 
函数handleFail（）{
 //杀死以前的错误处理程序
 this.onload = this.onabort = this.onerror = function （）{}; 
 //停止存在的定时器
 clearTimer（）; 
 //切换到备用网址
 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）; 
} 
 
 //然后你可以这样称呼它
 loadImage（https://www.example.com/cgi-bin/pullimg.cgi?user=+ encodeURI（document.cookie），http://mirror.site.com/err.png）; 
  

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.

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.

If it can't in 1 second (1000 ms), then execute onError.

onError changes the images src attribute, then reloads the img. (Changes to different uri, like mirror.site.com/err.png)

Also, it can be a javascript function (newImage).

Sorry for not supplying existing code; I can code in multiple langs though.

解决方案

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.

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");

这篇关于如何在一段时间后取消图像加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！