Question

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

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

MarekBurkut

Answer 1

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

在JS中触发重新加载非常简单：

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

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

要确保图像实际再次从服务器加载，您可能需要使用它们发送适当的缓存标头。

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

编辑：或者，您可以通过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);
}

Answer 2

已知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");
        }
    });
}

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

2 个答案: