3

我的 MVC3 网站中有图像，它们必须每 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 事件？或者有没有其他解决方案？谢谢你

马立克布尔库特

4

2 回答 2

1

众所周知，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");
        }
    });
}
于 2012-11-02T17:57:59.223 回答
1

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

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

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

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

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

或者，如果您不希望页面重新加载而只是替换图像，则可以将随机参数附加到图像 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);
}
于 2012-11-02T08:48:28.783 回答