newImage.src = "image.jpg?t=" + new Date().getTime();優點: 100%的可靠,快速和易于理解和執行。
缺點:繞過緩存完全,意味著不必要的延遲和帶寬使用時圖像不視圖間進行變換。將潛在地填充瀏覽器緩存(和任何中間緩存)與許多,許多副本完全相同的圖像!此外,還需要修改圖片網址。
當使用方法:使用時,圖像是不斷變化的,如用于現場攝像頭飼料。如果您使用此方法,請務必與服務圖像本身Cache-control: no-cache
的HTTP頭! (通常這可以使用.htaccess文件設置)。否則,你將逐漸填充高速緩存與舊版本的圖像!
(2)向URL中添加查詢參數,只有當文件發生更改時,才會更改,例如:
echo '<img src="image.jpg?m=' . filemtime('image.jpg') . '">';(這是php的服務器端代碼,但這里的重要的一點就是這樣一個?M = [文件最后修改時間]查詢字符串被附加到文件名)。
優點: 100%的可靠,快速和易于理解和實施,并完美地保留緩存的優勢。
缺點:需要修改圖像的URL。此外,為服務器多一點工作 - 它必須獲得文件最后修改的時間的訪問。另外,需要服務器端信息,因此不適合純客戶端方案來檢查刷新的映像。
使用時間:當你希望緩存圖像,但可能需要在服務器端更新它們不時在不改變文件名本身。AND,當您可以輕松地確保正確的querystring添加到HTML中的每個圖像實例。
(3)與頭即成您的圖像Cache-control: max-age=0, must-revalidate
,以及獨特添加的memcache -busting片段標識符的URL,如:
newImage.src = "image.jpg#" + new Date().getTime();這里的想法是,緩存控制頭將圖像放在瀏覽器緩存中,但立即標記它們陳舊,以便每次重新顯示時,瀏覽器都必須檢查服務器以查看它們是否已更改。這確保了瀏覽器的HTTP緩存總是返回圖像的最新副本。但是,如果瀏覽器有一個內存中的副本,那么瀏覽器通常會重復使用它,甚至在這種情況下甚至不檢查它們的HTTP緩存。為了防止這種情況,一個片段標識符用于:在內存中的圖象比較src
的包括片段標識符,但它被查詢HTTP緩存之前剝去。(因此,例如,image.jpg#A
和image.jpg#B
可能既從顯示image.jpg
在瀏覽器的HTTP緩存條目,但image.jpg#B
絕不會使用內存中顯示從當保留的圖象數據image.jpg#A
最后被顯示)。
優點:合理的利用的HTTP緩存機制,使用緩存圖像,如果他們沒有改變。適用于將查詢字符串添加到靜態圖片網址的服務器(因為服務器從不會看到片段標識符 - 它們僅供瀏覽器自己使用)。
缺點:憑借瀏覽器(文件或至少很差)有點可疑的行為,就在他們的URL片段標識符圖像(不過,我在FF27,Chrome33和IE11這個測試成功)。對于每個圖像視圖仍然發送重新驗證請求到服務器,如果圖像只有很少變化和/或延遲是一個大問題,這可能是過度的(因為您需要等待重新驗證響應,即使緩存的圖像仍然是好的) 。需要修改圖片網址。
何時使用:使用時,圖像可能會經常發生變化,或者需要由客戶端刷新間歇性無服務器端腳本參與,但如果你仍然想緩存的優勢。例如,輪詢每幾分鐘不規律地更新圖像的實況網絡攝像頭?;蛘撸绻姆掌鞑辉试S靜態圖片網址的查詢字符串,請使用(1)或(2)。
(4)強行刷新使用javascript特定的圖像,首先加載到一個隱藏<iframe>
,然后調用location.reload(true)
的iframe的contentWindow
。
步驟是:
將要刷新的圖像加載到隱藏的iframe中。這只是一個設置步驟 - 如果需要,它可以提前實際刷新。如果圖像在這個階段無法加載甚至不重要!
完成后,您的網頁或任何DOM節點中的任何位置(即使在Javascript變量中存儲的頁外)中的所有副本都會被清空。您需要確保所有:因為瀏覽器可能會以其他方式展示從陳舊的內存中拷貝圖像(IE11尤其是做到這一點),這是必要的內存拷貝都被清零,刷新HTTP緩存之前。如果其他JavaScript代碼以異步方式運行,您可能還需要阻止該代碼在此期間創建待刷新圖像的新副本。
呼叫iframe.contentWindow.location.reload(true)
。該true
部隊緩存旁路,直接從服務器重裝并覆蓋現有的緩存副本。
一旦它完成重新 -loading,后立刻圖像。他們現在應該從服務器顯示新版本!
對于相同域的圖片,您可以直接將圖片加載到iframe中。對于跨域圖像,你要代替加載HTML網頁,從您的域名包含在圖像<img>
標記,否則你會得到嘗試調用時錯誤“訪問被拒絕” iframe.contentWindow.reload(...)
。
優點:工作就像image.reload()函數,你希望的DOM了!允許通過正常緩存圖像(即使有未來的到期日期,如果你想要的話,從而避免頻繁的重新驗證)。允許您在不更改當前網頁或其他網頁(僅使用客戶端代碼)上的圖片的網址的情況下刷新特定圖片。
缺點:憑借的JavaScript。不是100%保證在每個瀏覽器正常工作(我已經測試這成功在FF27,Chrome33和IE11雖然)。相對于其他方法非常復雜。
何時使用:當你有,你想緩存基本上是靜態圖像的集合,但你仍然需要能夠偶爾更新它們,并得到即時的視覺反饋,該更新發生。(特別是當只刷新整個瀏覽器頁面不工作,例如在一些基于Ajax的web應用程序)。當方法(1) - (3)不可行,因為(無論什么原因)你不能更改可能顯示圖像的所有URL,你需要更新。(請注意,使用的3種方法,圖像將被刷新,但如果另一個頁面,然后嘗試顯示該圖像沒有相應的查詢字符串或片段標識符,它可能會顯示一個舊版本代替)。
新聞熱點
疑難解答