離線時瀏覽器會加載緩存的圖像嗎？
[英]Are cached images loaded by the browser when offline?
問題描述
我正在使用 AngularJS，我正在開發 SPA。 我的目標是提供離線瀏覽。 JSON數據可以很方便的存儲在js變量中，圖片可以緩存在Image對象中。
所以現在我想知道..如果一個人離線並嘗試瀏覽內容，會發生什么？
1) 瀏覽器無法加載圖像，因為處於離線狀態，它無法檢查圖像的最新版本（緩存的或在線的）
2) 瀏覽器在緩存中找到圖像的引用。 即使瀏覽器無法檢查在線圖像的最新版本，也會加載緩存的圖像
注意：這不是一個重復的問題。
我使用 Angular 的事實與問題無關。 會有其他人使用其他框架並尋找通用解決方案。
其次..這些答案只是指出使用 HTML5 和服務工作者。 與 AngularJS 無關的事情。
5 個解決方案
解決方案1
1 2016-06-06 15:26:11
解決方案2
1 2016-06-06 15:28:07
作為 Alex Johnson 的答案，您可能應該查看Service Workers API 。 這個 Github repo中也有很好的技術解釋。 它將允許您確保您的架構支持愉快的離線體驗。
解決方案3
1 2016-06-06 15:28:30
我建議對您的圖像進行 base64 編碼，這實際上將它們變成了字符串。 Base64 字符串可用作圖像源。 您可以將這些字符串保存到 localStorage 中，並在離線時讀取它們。
看看這段代碼：
<img src="#" class="myImage" /> <style type="text/css"> .myImage { content: url('data:image/gif;base64,R0lGODlhEAAQALMPAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAA8ALAAAAAAQABAAQAQ78EkJqp10LaB759sDVh4ZiqVVTqC3om6smVvcAmz74Zioz7zMRmfC/WTAGXI0Ws5gtc+HhXz2fJagJAIAOw=='); } </style>解決方案4
1 已采納 2016-06-15 11:29:10
令人不滿意但誠實的答案是“視情況而定”。 除非您通過在 AppCache 或 ServiceWorker 中列出您的圖像來使用特定說明，否則瀏覽器緩存可能會或可能不會顯示您的圖像。 較舊的瀏覽器會在您離線打開文件時顯示 HTML 文檔及其內容，但確實具有上述功能的瀏覽器會更積極地告訴您您離線並且根本不會顯示該頁面。 原因是瀏覽器制造商無法保證良好的體驗，因此您不會顯示可能會或可能不會顯示圖像的文檔，而是會收到“您離線”消息。
您可以指示瀏覽器長時間緩存圖像，這增加了它們被顯示的可能性https://developers.google.com/speed/docs/insights/LeverageBrowserCaching但是沒有干凈的方法來指示瀏覽器不要看除非您在 AppCache 或 ServiceWorker 中指定了它們的較新版本。
解決方案5
0 2016-06-07 11:12:51
好的，閱讀您的答案后，最有用的是@Alexjohnson 答案中的那篇文章。 使 Angular JS 離線工作說明了瀏覽器緩存：
本機“舊”緩存在這里不起作用，因為它仍然需要與服務器通信才能獲得“304 Not Modified”http 代碼。
但是我已經嘗試過這種技術，而且它的效果很奇怪。 各位大俠請自行試一試，你會看到，圖片預加載后下線，圖片就會顯示出來。 而且，如果您將另一個img元素與網絡圖像的引用一起放置，則不會加載。
如果刷新頁面，將顯示緩存的圖像。
你怎么看待這件事？
這是一個例子：
var my_image1 = new Image(); var my_image2 = new Image(); var images = 2, count_images = 0; // notify the user that the image has been preloaded, and reveal the // button to use the preloaded image function notify() { count_images++; if (count_images == images) { document.getElementById('preloadbutton2').style.display = 'none'; document.getElementById('after_preload').style.display = 'block'; } console.log('finito'); } function preload() { my_image1.onload = notify; my_image2.onload = notify; my_image1.src = 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/47351a35419617.56f6327af207a.gif'; my_image2.src = 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/2150fb35419617.56f6327b44e47.gif'; } // using only the file name, we can take advantage of the preloaded image function use_preloaded_image() { document.getElementById('offline_1').src = my_image1.src; document.getElementById('offline_2').src = my_image2.src; }
<html> <head> </head> <body> <!-- INSTRUCTIONS OPEN THIS FILE IN THE BROWSER WITH ONLINE NETWORK, CLICK ON THE BOTTON TO PUT IMAGES IN CACHE GO OFFLINE AND REALOAD THE PAGE (INSPECT ID DOF THE IMAGES: IMAGES FRO MTHE WEB WON'T BE LOADED, THE ONES CACHED WILL BE SHOWED) RELOAD THE PAGE: AS BEFORE, IMAGES FROM CACHE ARE STILL THERE, THEY'RE VISIBLE --> <!-- IMAGES FROM THE WEB --> <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5aa12735419617.56f6327ab4f72.gif" width="500px" /> <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/74f16635419617.56f6327adcf75.gif" width="500px" /> <br/> <!-- IMGES PUT IN CACHE ON BUTTON CLICK --> <input type="button" id="preloadbutton2" value="Preload Image" onclick="preload();this.value='Loading. Please wait...'" /> <div id="after_preload" style="display: none"> <input type="button" value="Use Preloaded Image" onclick="use_preloaded_image()" /><br /> <img src="" id="offline_1" width="500px" /> <img src="" id="offline_2" width="500px" /> </div> </body> </html>
在瀏覽器中加載html頁面時，如何避免加載所有圖像？
[英]How to avoid loading all images when a html page is loaded in browser?
所有圖片（包括緩存的圖片）加載后，是否發生jQuery事件？
[英]jquery event once all images are loaded (including cached images)?
javascript預加載圖像-檢查是否已緩存/加載圖像以防止預加載
[英]javascript preloading images - check whether an image is cached/loaded to prevent preload
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.