刷新图像与一个新的一个在相同的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

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

当前回答

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

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

其他回答

在创建新图像之后，是否从DOM中删除旧图像并用新图像替换它?

您可以在每次updateImage调用时抓取新图像，但不将它们添加到页面。

有很多方法可以做到这一点。像这样的东西是可行的。

function updateImage()
{
    var image = document.getElementById("theText");
    if(image.complete) {
        var new_image = new Image();
        //set up the new image
        new_image.id = "theText";
        new_image.src = image.src;           
        // insert new image and remove old
        image.parentNode.insertBefore(new_image,image);
        image.parentNode.removeChild(image);
    }

    setTimeout(updateImage, 1000);
}

在得到工作后，如果仍然有问题，它可能是缓存问题，就像其他答案谈论。

2009-07-02 23:44:12

一种解决方法是像建议的那样笨拙地添加一些get查询参数。

更好的答案是在HTTP报头中发出两个额外的选项。

Pragma: no-cache
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Cache-Control: no-cache, must-revalidate

通过提供过去的日期，它不会被浏览器缓存。缓存控制是在HTTP/1.1中添加的，必须重新验证标签表明代理永远不应该提供旧的映像，即使是在可减轻的情况下，而Pragma: no-cache对于当前的现代浏览器/缓存来说并不是真正必要的，但可能有助于一些复杂的破碎的旧实现。

2009-07-02 22:57:03

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

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

我最终要做的是让服务器将对该目录下的图像的任何请求映射到我试图更新的源。然后，我让计时器在名称的末尾附加一个数字，这样DOM就会将其视为新图像并加载它。

E.g.

http://localhost/image.jpg
//and
http://localhost/image01.jpg

将请求相同的图像生成代码，但它将看起来像不同的图像浏览器。

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";
var count = 0;
function updateImage()
{
    if(newImage.complete) {
        document.getElementById("theText").src = newImage.src;
        newImage = new Image();
        newImage.src = "http://localhost/image/id/image" + count++ + ".jpg";
    }
    setTimeout(updateImage, 1000);
}

2009-08-17 15:18:27

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

推荐文章

最新文章

标签