离线时浏览器是否加载缓存图像？

Question

我正在使用 AngularJS 并且正在开发 SPA。我的目标是提供离线浏览。 JSON 数据可以方便地存储在js变量中，图片可以缓存在Image对象中。

所以现在我想知道..如果一个人离线并尝试浏览内容，会发生什么？

1) 浏览器无法加载图像，因为处于离线状态，它无法检查图像的最新版本（缓存的还是在线的）

2) 浏览器在缓存中找到图像的引用。即使浏览器无法检查最新版本的在线图像，也会加载缓存图像

注意：这不是一个重复的问题。

我使用 Angular 的事实与问题无关。会有其他人使用其他框架并寻找通用解决方案。

其次.. 这些答案只是指出使用 HTML5 和服务人员。与 AngularJS.

无关的事情

Answer 1

当客户端未连接到 Internet（离线）时，浏览器缓存不是使站点保留功能的合适替代方法。

看看：Makes Angular JS works offline

您可以通过多种方式向离线用户提供资产。

Answer 2

作为 Alex Johnson 回答的同伴，您可能应该查看 Service Workers API. There is also a good explanation of the technology in this Github repo。它将让您确保您的架构支持愉快的离线体验。

Answer 3

我建议对图像进行 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>

Answer 4

好的，看完你的回答，最有用的是@Alexjohnson 回答中的那一段。 Makes Angular JS works offline 说了一些关于浏览器缓存的事情：

The native "old" caching won't work here, because it still requires to communicate with the server to have the "304 Not Modified" http code.

但我已经尝试过 this technique，而且效果很奇怪。各位亲们自己试试吧，你会发现，图片预加载后下线，图片就会显示出来。如果您将另一个 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>

Answer 5

不令人满意但诚实的答案是 "it depends"。除非您通过在 AppCache 或 ServiceWorker 中列出您的图像来使用特定指令，否则浏览器缓存可能会或可能不会显示您的图像。较旧的浏览器会显示 HTML 文档及其离线打开文件时的内容，但具有上述功能的浏览器会更积极地告诉您您处于离线状态并且根本不会显示该页面.原因是浏览器制造商无法保证良好的体验，因此您不会显示可能会或可能不会显示图像的文档，而是收到 "you are offline" 消息。

您可以指示浏览器长时间缓存图像，这会增加它们被显示的可能性 https://developers.google.com/speed/docs/insights/LeverageBrowserCaching 但是没有明确的方法指示浏览器不要寻找更新版本的图像，除非您在 AppCache 或 ServiceWorker 中指定它。

离线时浏览器是否加载缓存图像？

Are cached images loaded by the browser when offline?

javascript

caching

offline-caching

angularjs