【问题标题】:How to refresh image source only if new image is actually available?只有当新图像实际可用时如何刷新图像源?
【发布时间】:2013-12-22 22:13:35
【问题描述】:
<!--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,但我是一名新手程序员,所以如果你能分解任何复杂的代码,将不胜感激。谢谢!

【问题讨论】:

  • 将图像提取到其他 dom 元素(例如隐藏)图像中,只有在确认新图像正确加载后才替换显示的图像。

标签: javascript jquery image src


【解决方案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”

【讨论】:

  • 你能定义“没用”吗?发生错误?图片没有加载?
猜你喜欢
  • 2018-01-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-09-12
  • 2023-04-03
  • 1970-01-01
  • 1970-01-01
  • 2019-02-18
相关资源
最近更新 更多