刷新图像与一个新的一个在相同的url

我正在访问我的网站上的一个链接，每次访问它都会提供一个新的图像。

我遇到的问题是，如果我试图在后台加载图像，然后更新页面上的图像，图像不会改变——尽管在我重新加载页面时它会更新。

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage()
{
if(newImage.complete) {
    document.getElementById("theText").src = newImage.src;
    newImage = new Image();
    number++;
    newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
}

    setTimeout(updateImage, 1000);
}

FireFox看到的头文件:

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache
Transfer-Encoding: chunked
Content-Type: image/jpeg
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Server: Microsoft-HTTPAPI/1.0
Date: Thu, 02 Jul 2009 23:06:04 GMT

我需要强制刷新页面上的图像。什么好主意吗?

当前回答

回答:你可以简单地使用fetch和缓存选项设置为'reload'来更新缓存:

fetch("my-image-url.jpg", {cache: 'reload', mode: 'no-cors'})

下面的函数将更新缓存并重新加载页面中的图像:

async function reloadImg(url) {
  await fetch(url, { cache: 'reload', mode: 'no-cors' })
  document.body.querySelectorAll(`img[src='${url}']`)
    .forEach(img => img.src = url)
}

它返回一个承诺，所以如果你愿意，你可以像await reloadImg("my-image-url.jpg")一样使用它。

如今，fetch API几乎在任何地方都可用(当然，IE除外)。

2021-02-22 08:20:20

其他回答

这是我的解决方案。这很简单。帧调度可以更好。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">      
        <title>Image Refresh</title>
    </head>

    <body>

    <!-- Get the initial image. -->
    <img id="frame" src="frame.jpg">

    <script>        
        // Use an off-screen image to load the next frame.
        var img = new Image();

        // When it is loaded...
        img.addEventListener("load", function() {

            // Set the on-screen image to the same source. This should be instant because
            // it is already loaded.
            document.getElementById("frame").src = img.src;

            // Schedule loading the next frame.
            setTimeout(function() {
                img.src = "frame.jpg?" + (new Date).getTime();
            }, 1000/15); // 15 FPS (more or less)
        })

        // Start the loading process.
        img.src = "frame.jpg?" + (new Date).getTime();
    </script>
    </body>
</html>

2016-07-18 13:33:14

函数reloadImage (imageId) ｛ path =' ../showImage.php?cache=';/ /例如 imageObject = document.getElementById(imageId); imageObject。src = path + (new Date()).getTime(); ｝ <img src='../showImage.php' id='myimage' /> < br / > <input type='button' onclick="reloadImage('myimage')"/>

2015-05-01 15:09:39

在同一位置放置图像的第二个副本，然后删除原始图像。

function refreshImg(ele){
    ele.insertAdjacentHTML('beforebegin',ele.outerHTML);
    ele.parentNode.removeChild(ele);
}

这将有效地刷新图像。

Crossbrowser。insertAdjacentHTML, outerHTML, parentNode和removecchild都是跨浏览器的。

在大多数情况下，性能损失几乎可以忽略不计。@Paolo Bergantino的答案可能比这个函数更好。使用他的答案，只有一个DOM元素受到影响。这个函数有两个元素。

2020-12-17 22:43:29

不需要新的Date(). gettime()恶作剧。你可以通过使用jQuery .load()创建一个不可见的虚拟图像来欺骗浏览器，然后每次创建一个新的图像:

<img src="" id="dummy", style="display:none;" />  <!-- dummy img -->
<div id="pic"></div>

<script type="text/javascript">
  var url = whatever;
  // You can repeat the following as often as you like with the same url
  $("#dummy").load(url);
  var image = new Image();
  image.src = url;
  $("#pic").html("").append(image);
</script>

2019-10-07 20:10:11

<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>

这个做的是，当图像加载时，安排它在1秒内重新加载。我在不同类型的家庭安全摄像头的页面上使用这个。

2017-10-16 16:29:59

刷新图像与一个新的一个在相同的url

推荐文章

最新文章

标签