如何更新MVC 3站点中的图像？

i have Images in my MVC3-Webseite that they must be updates in every 30 Sec. Because the Images are updated im Server in every 30 Sec. So i have tried to update it with JQuery like :

我在我的MVC3-Webseite中有图像，它们必须每30秒更新一次。因为图像在服务器中每30秒更新一次。所以我试图用JQuery更新它，如：

<div id="galerie">
    <ul>
        <li>
            <img id = "img1" class = "img1" alt="Image 7" src="@Url.Content("Content/Images/Image_7.jpg")"/>
            Image 7
        </li>
        <li>
            <img id = "img2" class = "img2" alt="Image 5" src="@Url.Content("Content/Images/Image_5.jpg")"/>
            Image 5
        </li>

</div> 

<script type="text/javascript"> 
     function UpdateImages() { 
         $.get('@Url.Action("Details","Display", new { id = "test" } )', function (data) {
             $('#main').replaceWith(data);
         }); 
     } 
    function myFunction() {
        setInterval(UpdateImages, 30000);
    }
</script>

But Problem is that the Images are not still updated. They need to Pageload again. don't that? so i want to know how can i fire the Pageload event with JS? or is there any other solution for the Problem? thank you

但问题是图像还没有更新。他们需要再次上传页面。不是吗？所以我想知道如何用JS激活Pageload事件？还是有其他问题的解决方案？谢谢

MarekBurkut

2 个解决方案

#1

If the URL of the images does not change, the browser will assume the images it has in cache as still the right ones.

如果图像的URL没有改变，浏览器将假设它在缓存中的图像仍然是正确的。

Triggering a reload in JS is easy:

在JS中触发重新加载很容易：

document.location.href = document.location.href;

Every change to the href property triggers a page reload, even if that value doesn't change.

对href属性的每次更改都会触发页面重新加载，即使该值未发生更改。

To make sure the images are actually loaded from the server again, you may have to send appropriate Cache-Headers with them.

为了确保图像实际上再次从服务器加载，您可能必须使用它们发送适当的Cache-Header。

Alternatively, if you don't want the page to reload and just replace the images, you can append a random parameter to the image URL: ../image1.jpg?p=121799595 This will force the browser to query the server.

或者，如果您不希望页面重新加载并只是替换图像，则可以将随机参数附加到图像URL：../ image1.jpg？p = 121799595这将强制浏览器查询服务器。

Edit: Or, you can pass the images through an MVC action to ensure you get a fresh copy every time:

编辑：或者，您可以通过MVC操作传递图像，以确保每次都获得一个新的副本：

public FileStreamResult StreamImage(string fileName)
{
  // todo: Check whether the file actually exists and is an image
  string path = AppDomain.CurrentDomain.BaseDirectory + "images/";
  return File(new FileStream(path + fileName, FileMode.Open), "image/jpeg", fileName);
}

#2

JQuery.get() is known to cache the data. consider using JQuery.ajax() instead and set cache: false. with .ajax(), you will have more control of your code.

已知JQuery.get（）可以缓存数据。考虑使用JQuery.ajax（）代替并设置cache：false。使用.ajax（），您可以更好地控制代码。

function UpdateImages() { 
    $.ajax({
        type: "GET",
        url: '@Url.Action("Details","Display")',
        data: 'id=test',
        cache: false,
        success: function(data){
            $('#main').replaceWith(data);
        },
        error: function(data){
            alert("error");
        }
    });
}

#1