如何仅在新图像实际可用时刷新图像源？

Question

<!--WunderGroundRadar--> 
<script type = "text/javascript">
   setInterval(function refreshRadar() {

   document.getElementById("content14").src =  "http://api.wunderground.com/api/MyAPIkey/animatedradar/q/autoip.gif?&radius=90&num=15&delay=20&width=430&height=500&smooth=1&newmaps=1&interval=15&rainsnow=1" 
  }, 900000);

</script>

我使用上述代码每15分钟刷新我的网站上的天气雷达.gif图像。通常情况下这很有效，但有时候当刷新发生时，图像会从它的源中断开，直到下一次大约15分钟后的刷新发生之前，我的网站上就会显示一个损坏的图像图标。我希望设置这样一个机制，即如果请求的图像在刷新函数运行时被破坏或不可用，我将保留已经加载的图像而不是用一个损坏的图像图标替换它。我愿意使用任何可能实现此目的的javascript或JQuery，但我是一个初学者，所以如果您能分解任何复杂的代码，那将不胜感激。谢谢！

- Travis2375

---

将图片获取到其他DOM元素中（例如，隐藏的图像），并且只有在确认新图像已正确加载后再替换显示的图像。 - Marc B

Answer 1

你可以尝试像这样做：

<script type = "text/javascript">
   setInterval(function refreshRadar() {

      img = new Image();

      img.onload = function(){
         document.getElementById("content14").src = img.src;
      };

      img.src = "http://api.wunderground.com/api/MyAPIkey/animatedradar/q/autoip.gif?&radius=90&num=15&delay=20&width=430&height=500&smooth=1&newmaps=1&interval=15&rainsnow=1" 

  }, 900000);

</script>

它试图将源加载到临时图像中，只有在成功加载后才将源分配给“content14”

- Yuriy Galanter

---

请问您能具体说明一下“没用”是指什么？是出现了错误吗？还是图片无法加载？ - Yuriy Galanter