<img src> 带超时？

Question

我们的网站上有一些跟踪像素，如果它们的服务器出现故障或变慢，我希望保护我们的用户体验。最简单的方法是指定浏览器尝试加载给定的图像的最长时间，例如尝试100毫秒后放弃。这样比跟踪某个客户更好，否则第三方服务器的故障会影响我们的网站。

- Michael Reston

Answer 1

您可以使用JavaScript插入<img>，并使用setTimeout()在100毫秒后删除它。

使用jQuery的示例：

var tracker = $("<img>", { src: trackingUrl }).appendTo(document.body);
setTimeout(function() { tracker.remove(); }, 100);

- Electro

Answer 2

当文档准备就绪时，您应该加载它们。或者在html的最后一行。这样-它不会影响用户体验。可以使用jQuery来准备文档。

但是您可以使用window.load。

通常（并非总是）-所有脚本都应位于页面末尾。

如果要强制超时KILL：

创建一个img标签。

将load事件附加到img上（此函数将设置标志：downloaded = 1;）

设置src。

使用setTimeout函数来杀死img。

如何？

如果经过X毫秒后，downloaded == 0，则kill。

因此：每个从IMg加载的事件都会设置一个标志（downloaded = 1）。

您的超时函数不关心任何事情！！！ X毫秒后，它将杀死img-仅当downloaded == 0时。

- Royi Namir

---

为什么不直接删除<img>而要费心去处理条件呢？ - Electro

@Electro 这是一个跟踪像素。问题在于有时像素主机非常慢...所以他想要避免等待...如果在2秒内（例如）没有成功，就杀死-删除img。但是，如果它在2秒内成功了（downloaded==1），则不要删除img。 - Royi Namir

跟踪像素不需要在请求完成后保留图像。 - Electro

浪费在额外的代码上，用于跟踪<img>的状态。 - Electro

@Electro 如果有两个像素，其中一个正在寻找另一个，你移除其中一个...？你不应该仅仅因为你想要就移除它。你永远不知道脚本背后真正的操作是什么。 - Royi Namir

Answer 3

将 img.parentNode.removeChild(img) 视为

并非所有的 img 都有容器。

var img = new Image()
img.src = '...third-party server...'
setTimeout(function() {
  img.removeAttribute('src')
}, 100)

- zswang

---

你能否加一些解释，让其他人能够从你的代码中学习? - Nico Haase

我的实验结果。 - zswang

Answer 4

你需要使用 JavaScript 来实现这一点，HTML/HTTP 并没有原生的方法来在页面上做到这一点。可以在谷歌上搜索“HTML IMG 超时”。

- Cylindric

Answer 5

你可以在IMG标签中调用一个服务器进程。让它负责处理加载超时的问题。

- ethrbunny

---

标签中已经有一个服务器进程：它提供了“图像”。这就是需要时间的地方，需要在客户端中取消。如果取消交给服务器处理，取消也需要时间。 - Andrew Leach