Javascript 使用jquery自动参照图像_Javascript_Jquery

Javascript 使用jquery自动参照图像

javascript jquery

Javascript 使用jquery自动参照图像,javascript,jquery,Javascript,Jquery,我希望通过javascript（jQuery）循环更新图像，以避免加载页面的全部内容。因为它是一个网络摄像头图像，总是有相同的名称，所以存在一个问题，缓存并不总是显示当前图像。因此，我通过Javascript向图像名称添加了一个时间戳，以便这始终是一个新的图像名称，并且浏览器会更新它。我想改变两件事： a）当前，图像位于外部文件cam.php中是否可以在不使用PHP和include的情况下进行更改，以便只在页面上重新加载DIV，而不再有两个页面 b）始终显示第一个图像（来自页面的第一

我希望通过javascript（jQuery）循环更新图像，以避免加载页面的全部内容。因为它是一个网络摄像头图像，总是有相同的名称，所以存在一个问题，缓存并不总是显示当前图像。因此，我通过Javascript向图像名称添加了一个时间戳，以便这始终是一个新的图像名称，并且浏览器会更新它。我想改变两件事：

a）当前，图像位于外部文件cam.php中是否可以在不使用PHP和include的情况下进行更改，以便只在页面上重新加载DIV，而不再有两个页面

b）始终显示第一个图像（来自页面的第一次调用）和最新图像时，第一个图像在2秒后消失。ca，然后仅显示当前的一个。这当然也是一个缓存问题。我说得对吗？如何改变

  <head>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript">
    // Refresh File cam.php every 5 sec.
    $(document).ready(function() {
        $("#refresh").load("cam.php");
        var refreshId = setInterval(function() {
            $("#refresh").load('cam.php?' + 1*new Date());
        }, 5000);
    });
    </script>       

  </head>

  <body>

    <div class="container">
      <div class="card-deck mb-12 text-center">
        <div class="card mb-4 shadow-sm">       
          <div class="card-body" id="refresh">
            <?php
            // include cam.php
            require_once('cam.php');
            ?>  
          </div>
        </div>


      </div>
    </div>  

  </body>
</html>


//每5秒刷新一次cam.php文件。
$（文档）.ready（函数（）{
$（“#刷新”）.load（“cam.php”）；
var refreshId=setInterval（函数（）{
$（“#刷新”）.load（'cam.php？'+1*新日期（））；
}, 5000);
});

以及cam.php文件

<script>
// create timestamp and attach to picture name
$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());
</script>

<img src="https://www.domain.de/images/mega.jpg" id="myimg" class="img-fluid" >


//创建时间戳并附加到图片名称
$（“#myimg”）.attr（“src”），$（“#myimg”）.attr（“src”）+“？timestamp=“+new Date（）.getTime（））；

非常感谢

当图像加载时，计划在1秒内重新加载

试试这个-

<img src='someurl.com/someimage.ext' onload='imageRefresh(this, 1000);'>

Javascript:

<script language='javascript'>
 function imageRefresh(img, timeout) {
    setTimeout(function() {
     var d = new Date;
     var http = img.src;
     if (http.indexOf("&d=") != -1) { http = http.split("&d=")[0]; } 

     img.src = http + '&d=' + d.getTime();
    }, timeout);
  }
</script>


函数imageRefresh（img，超时）{
setTimeout（函数（）{
var d=新日期；
var http=img.src；
如果（http.indexOf（“&d=”）！=-1）{http=http.split（“&d=”）[0]；}
img.src=http+'&d='+d.getTime（）；
}，超时）；
}

加载图像时，计划在1秒内重新加载图像

试试这个-

<img src='someurl.com/someimage.ext' onload='imageRefresh(this, 1000);'>

Javascript:

<script language='javascript'>
 function imageRefresh(img, timeout) {
    setTimeout(function() {
     var d = new Date;
     var http = img.src;
     if (http.indexOf("&d=") != -1) { http = http.split("&d=")[0]; } 

     img.src = http + '&d=' + d.getTime();
    }, timeout);
  }
</script>


函数imageRefresh（img，超时）{
setTimeout（函数（）{
var d=新日期；
var http=img.src；
如果（http.indexOf（“&d=”）！=-1）{http=http.split（“&d=”）[0]；}
img.src=http+'&d='+d.getTime（）；
}，超时）；
}

我现在已经实现了这个解决方案，因为它工作得很好。谢谢你的帮助

<script type="text/javascript">
$(document).ready(function() {
    // Picture Refresh
setInterval('reloadImages()', 5000); // every 5 seconds autorefresh
});
function reloadImages()
{
$('#campic').attr('src', 'https://www.test.com/picture.jpg?' + Math.random()); 
}
</script>


$（文档）.ready（函数（）{
//图片刷新
setInterval（'reloadImages（）'，5000）；//每5秒自动刷新一次
});
函数重载图像（）
{
$（'#campic'）.attr（'src'，'https://www.test.com/picture.jpg?“+Math.random（））；
}

我现在已经实现了这个解决方案，因为它工作得很好。谢谢你的帮助

<script type="text/javascript">
$(document).ready(function() {
    // Picture Refresh
setInterval('reloadImages()', 5000); // every 5 seconds autorefresh
});
function reloadImages()
{
$('#campic').attr('src', 'https://www.test.com/picture.jpg?' + Math.random()); 
}
</script>


$（文档）.ready（函数（）{
//图片刷新
setInterval（'reloadImages（）'，5000）；//每5秒自动刷新一次
});
函数重载图像（）
{
$（'#campic'）.attr（'src'，'https://www.test.com/picture.jpg?“+Math.random（））；
}

谢谢丹尼尔，但这不管用。图像不再更新。感谢您的回答，但是图像将只加载一次，并且不会在下次“刷新”时显示。谢谢Daniel，但这不起作用。图像不再更新。感谢您的回答，但是图像将只加载一次，并且不会在下次“刷新”时显示。