OnClick从带有超时或失败功能的url加载背景图像

Question

我有一个带有onclick函数的HTML按钮"单击((；。如果点击，我想将图像加载为"；背景图像"；div标记的。图像应从服务器加载，该服务器为图像提供非常不可靠的服务(雨水雷达(，到超时为止的应答时间非常高。我无法控制服务器，但我被允许以获取图像。

如果图像无法加载或在30秒后未加载，我想显示故障转移图像或简单的文本消息，以便稍后重试。

我试图为样式背景图像属性定义第二个(故障转移(图像url，但是然后我的页面总是加载故障转移映像，我想这不是它的工作方式。此外，我不想显示一个"；加载图像失败"；图像，而页面仍在等待接收答案。。。

index.html

...
<a href="#gotoDiv" onclick="clicked()">GoToDiv</a>
...

javascript:

function clicked(){
document.getElementById('gotoDiv').style.backgroundImage =  "url('https://UNRELIABLE.SERVER/pic.jpg'), url('/failover.jpg')";
}

我有合适的方法吗？

Answer 1

您可以尝试一种预加载技术

function clicked() {
var elem = document.getElementById('gotoDiv');
elem.style.backgroundImage = 'url("loading.gif")';
function setErrorImg () {
elem.style.backgroundImage = 'url("failover.jpg")';
}
var timer = window.setTimeout(setErrorImg, 30000);
var img = new Image();
img.onload = function() {
window.clearTimeout(timer);
elem.style.backgroundImage = 'url("' + img.src + '")';
};
img.onerror = setErrorImg;
img.src = 'https://UNRELIABLE.SERVER/pic.jpg';
}