后备图像和超时 - 外部内容。 Javascript

Posted 2023-03-15

【中文标题】后备图像和超时 - 外部内容。 Javascript

【英文标题】：Fallback image and timeout - External Content. Javascript

【发布时间】：2010-12-08 00:19:23

【问题描述】：

如果外部图片无法加载或加载时间过长，那么设置本地后备图片的最佳方式是什么。

【问题讨论】：

太棒了！我正要问同样的问题，我做了一个快速的谷歌搜索，发现了这个问题。我想在服务器端做，但客户端听起来更简单。

【参考方案1】：

您可以添加onerror 处理程序：

<img
  src="http://example.com/somejpg.jpg"
  onerror='this.onerror = null; this.src="./oops.gif"'
/>

注意：在处理程序中将onerror设置为null，这样当oops.gif由于某种原因无法加载时，网页不会崩溃。

【讨论】：

哦，我忘了onerror。这可能更容易，但我在下面发布的解决方案允许预缓存图像并在它们必须显示之前检查它们的可用性。取决于你需要什么......

太棒了！当我学习这样的新技巧时喜欢它。我打算求助于一些jQuery jiggery pokery。

这里的问题是图像被视为不可用的时间！浏览器活动加载可能需要很长时间才能调用onerror 事件。

非常感谢。太棒了

【参考方案2】：

尝试使用 Image.complete 属性。

var img = new Image(w,h)
img.src = "http://...";

现在定期检查img.complete 是否为真，并调用一些后备机制 shuold 在 n 秒后它仍然是false。