两个图像刷新javascript没有一起运行

时间:2014-10-13 12:14:38

标签: javascript image refresh

我试图在同一页面上运行两个图像刷新javascripts,但其中一个没有运行,我做错了什么?我将它用于两个不同的网络摄像头图像。复制脚本是不够的?

  <a href="webcam/Webcam.jpg" ><img name="refresh" src="webcam/" alt="Vefmyndavél-1 Miðhúsa     loading..." width="980" height="540"   > </a>
<SCRIPT language=JavaScript type=text/javascript>
  <!--
  var t = 5 // interval in seconds
  image = "webcam/Webcam.jpg" //name of the image
  function Start() {
  tmp = new Date();
  tmp = "?"+tmp.getTime()
  document.images["refresh"].src = image+tmp
  setTimeout("Start()", t*1000)
  }
  Start();
  // -->
  </SCRIPT>





 <a href="webcam2/Webcam2.jpg" ><img name="refresh1" src="webcam2/" alt="Vefmyndavél-2 Miðhúsa loading..." width="980" height="540"  > </a>
<SCRIPT language=JavaScript type=text/javascript>
  <!--
  var t = 5 // interval in seconds
  image = "webcam2/Webcam2.jpg" //name of the image
  function Start() {
  tmp = new Date();
  tmp = "?"+tmp.getTime()
  document.images["refresh1"].src = image+tmp
  setTimeout("Start()", t*1000)
  }
  Start();
  // -->
  </SCRIPT>

1 个答案:

答案 0 :(得分:0)

使用html文档中的第二个函数Start()覆盖第一个函数Start()。请记住,您在javascript中有一个全局命名空间。

一个肮脏而快速的解决方案是重命名第二个function

例如:

    <a href="webcam/Webcam.jpg" ><img name="refresh" src="webcam/" alt="Vefmyndavél-1 Miðhúsa     loading..." width="980" height="540"   > </a>
<SCRIPT language=JavaScript type=text/javascript>
  <!--
  var t = 5 // interval in seconds
  imageOne = "webcam/Webcam.jpg" //name of the image
  function Start() {
  tmp = new Date();
  tmp = "?"+tmp.getTime()
  document.images["refresh"].src = imageOne+tmp
  setTimeout("StartFirst()", t*1000)
  }
  Start();
  // -->
  </SCRIPT>





 <a href="webcam2/Webcam2.jpg" ><img name="refresh1" src="webcam2/" alt="Vefmyndavél-2 Miðhúsa loading..." width="980" height="540"  > </a>
<SCRIPT language=JavaScript type=text/javascript>
  <!--
  var t = 5 // interval in seconds
  imageTwo = "webcam2/Webcam2.jpg" //name of the image
  function StartSecond() {
  tmp = new Date();
  tmp = "?"+tmp.getTime()
  document.images["refresh1"].src = imageTwo+tmp
  setTimeout("StartSecond()", t*1000)
  }
  StartSecond();
  // -->
  </SCRIPT> 

<强>更新

简化脚本的一种方法:

<a href="webcam/Webcam.jpg" ><img name="refresh" src="webcam/" alt="Vefmyndavél-1 Miðhúsa     loading..." width="980" height="540"   > </a>
<a href="webcam2/Webcam2.jpg" ><img name="refresh1" src="webcam2/" alt="Vefmyndavél-2 Miðhúsa loading..." width="980" height="540"  > </a>

<SCRIPT language=JavaScript type=text/javascript>
  // Fires after page is loaded
  window.addEventListener("load", function() {

     // Called every 5 seconds updateImages();
     setTimeout("updateImages()", 5000);

     //Helper function to change src attribute of image tag
     function updateImages(){
        tmp = "?" + new Date().getTime();
        document.images["refresh"].src = "webcam/Webcam.jpg" + tmp;
        document.images["refresh1"].src = "webcam/Webcam2.jpg" + tmp;
     }
  });
  </SCRIPT>

下面的脚本在load对象上注册window事件。其中的代码将在页面加载后执行,并启动计时器任务以更新图像。