我如何更新我的MVC 3網站中的圖像？

我在我的MVC3-Webseite中有圖片，他們必須每30秒更新一次。因爲圖像每30秒更新一次im服務器。所以我試圖用JQuery來更新它：我如何更新我的MVC 3網站中的圖像？

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

但是問題是圖像沒有被更新。他們需要再次Pageload。不是嗎？所以我想知道我怎麼能用JS解決Pageload事件？或者是否有解決問題的其他解決方案？謝謝

MarekBurkut

來源

2012-11-02 burkut

你在獲得什麼數據？以及你如何在這個數據中的圖像網址？ –

我得到整個網站的正確內容。所以我把它替換爲「$（'＃main'）。replaceWith（data）;」適當的頁面片段。圖片網址不會更改。它們總是一樣的。這意味着URL永遠不會改變。圖像內容只有更改。 – burkut

如果圖像的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); 
}

來源

2012-11-02 08:48:28

我很抱歉我的最後一條評論。真的它已經與重新加載。我沒有看到它。謝謝你的鏡頭Neubauer – burkut

我已經注意到，它現在重新加載圖像只有相同的時間f.e.最多10次。那麼它就不可靠。這意味着它隨機重新加載更改的圖像。我不知道如何解決隨機重新加載更改圖像的原因。 – burkut

您是否發送帶有圖像的緩存標頭？您可能必須通過操作傳遞圖像，而不是鏈接到靜態文件。 –

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-02 17:57:59

我如何更新我的MVC 3網站中的圖像？

回答

相關問題