我们可以使用javascript将图像推送到浏览器缓存吗

user3527063 发表于 Dev

用户名

我们的应用程序中具有打印功能，我们可以在浏览器中打印图像。我们正在与所有图像源一起动态形成HTML div [图像源来自Web服务url]

当我们触发“ Windows.Print（）”时，只有第一张图像在打印预览（chrome）中始终可用，其余图像显示为空白。

如果我第二次触发打印事件，则所有图像都将被打印而没有任何问题，因为到那时所有图像都已被缓存。

请让我知道如何在打印之前将所有图像推送到缓存中。我需要在javascript中执行此操作。不想进行任何html更改。

我正在使用bone.js并使用图像创建模型视图。然后以HTML绑定视图。然后我会用它来打印。在IE和Safari中可以正常工作。但不在chrome中，它会显示打印预览屏幕，并始终尝试从浏览器缓存中加载所有图像。但是在进行打印时，我不会在浏览器中显示这些图像。我所有的图像源都是动态的，均来自该服务。我只是将URL动态设置为图像源。

<%_.each( Documents, function(oDocument) {%>
    <div class="images span1">          
        <img  src="<%- oDocument.URL%>" width="98" height="70" />       
    </div>
<% });%>

在打印预览中，只有一幅图像即将出现，其余全部作为点出现。如果我取消打印并再次打印，一切都很好。

谢谢耶维莎

这可以完全通过使用Image对象在JavaScript中完成。

var cachedImage = new Image();
cachedImage.addEventListener('load', function () {
    alert('Cached image loaded');            
});
cachedImage.src = 'http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png';

我创建了一个工作的JSFIDDLE示例，在http://jsfiddle.net/pwdst/wc1zrL0v/上显示了此示例

可以响应用户事件来创建新图像，例如，单击按钮，甚至滚动到某个位置。如果来自服务器的图像具有正确的缓存头，则它将保留在浏览器缓存中，以备以后在您的打印页面中使用。

您将可以在Chrome开发者工具的“网络”标签中查看请求，也可以使用Telerik提供的出色的Fiddler工具查看请求。成功加载还将触发代码示例中添加的加载事件侦听器。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。