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

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

当前回答

我使用下面的概念，首先将图像绑定到一个虚假的(缓冲区)url，然后将其绑定到有效的url。

imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + "Buffer.jpg";

imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + ".jpg";

通过这种方式，我强制浏览器使用有效的url进行刷新。

2017-07-28 10:17:19

其他回答

尝试在url的末尾添加cachebreaker:

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

这将在创建图像时自动附加当前时间戳，并且它将使浏览器重新查找图像，而不是从缓存中检索图像。

2009-07-02 22:46:10

在创建新图像之后，是否从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

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

我有一个要求:1)不能添加任何?var=xx的图像2)它应该跨域工作

我真的很喜欢这个答案中的第4个选项，但是:

它在可靠地跨域工作方面存在问题(并且需要修改服务器代码)。

我的捷径是:

创建隐藏iframe 加载当前页面到它(是的，整个页面) iframe.contentWindow.location.reload(真正的); 重新设置图像源为其本身

在这里

function RefreshCachedImage() {
    if (window.self !== window.top) return; //prevent recursion
    var $img = $("#MYIMAGE");
    var src = $img.attr("src");
    var iframe = document.createElement("iframe");
    iframe.style.display = "none";
    window.parent.document.body.appendChild(iframe);
    iframe.src = window.location.href;
    setTimeout(function () {
        iframe.contentWindow.location.reload(true);
        setTimeout(function () {
            $img.removeAttr("src").attr("src", src);
        }, 2000);
    }, 2000);
}

我知道，setTimeout。您必须将其更改为适当的onload-events。

2017-05-13 15:53:12

我通过servlet将数据发送回来解决了这个问题。

response.setContentType("image/png");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache, must-revalidate");
response.setDateHeader("Expires", 0);

BufferedImage img = ImageIO.read(new File(imageFileName));

ImageIO.write(img, "png", response.getOutputStream());

然后从页面中给它一个带有一些参数的servlet，以获取正确的图像文件。

<img src="YourServlet?imageFileName=imageNum1">

2013-06-07 15:15:52

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

推荐文章

最新文章

标签