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

【问题标题】：can we push images to browser cache using javascript我们可以使用 javascript 将图像推送到浏览器缓存吗
【发布时间】：2014-08-29 21:29:14
【问题描述】：

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

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

如果我第二次触发打印事件，所有图像都将被打印，因为所有图像都在那时被缓存。

请告诉我如何在打印前将我的所有图像推送到缓存中。我需要在 javascript 中执行此操作。不想做任何 html 更改。

我正在使用backbone.js 并使用图像创建模型视图。然后在 HTML 中绑定视图。然后我会用它来打印。这在 IE 和 Safari 中运行良好。但不是在 chrome 中，它显示打印预览屏幕并总是试图从浏览器缓存中加载所有图像。但是我在打印时不会在浏览器中看到这些图像。我所有的图像源都是动态的，并且来自服务。我只是将 url 动态设置为图像源。

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

在打印预览中，只有一张图像出现，其余图像均以点的形式出现。如果我取消打印并再次打印，一切都会好起来的。

谢谢，吉维塔

【问题讨论】：

如果您提供相应的源代码可能会有用。
请求资源（例如，在<img src> 的位置使其无法被看到）将获取资源，并在浏览器喜欢时缓存它。然后可以监视 IMG onload 事件以确保资源已被提取并可能被缓存。
您是否还需要 Jeevitha 的帮助，或者您的问题现在已经解决了吗？
抱歉延迟回复。我仍然有问题。我正在使用backbone.js，需要在我创建模型的函数中缓存图像。我在问题中提供了更多细节。请帮帮我。

标签： javascript printing browser-cache

【解决方案1】：

这可以通过使用 Image object 纯粹在 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 example 在http://jsfiddle.net/pwdst/wc1zrL0v/ 上显示此内容

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

您将能够在 Chrome 开发工具的“网络”选项卡中看到请求，或者使用出色的 Fiddler tool from Telerik。加载成功还会触发代码示例中添加的加载事件监听器。

【讨论】：

谢谢。我试图在我创建视图模型的函数中实现以下内容。 var cachedImage = new Image(); cachedImage.addEventListener('load', function () { }); cachedImage.src = 'localhost:60883/Information/Document/1411432'; var PrintModal = new Backbone.Model({ Number: app.activeJob.get('Number'), ID: app.activeJob.get('ID'), HeaderLabel: titleString, }); PrintModal.set('Documents', arrDocuments);
但还是不行。我无法使用 windows onload，因为我尝试加载的所有图像都是动态的并且来自服务。
这部分对我有用。我需要等待加载所有要加载到缓存中的图像。目前，下一行甚至在下载图像之前就被执行了
这是图像上加载事件监听的目的。该脚本将立即继续到下一行，因此您需要在图像成功加载后使用一个或多个回调函数来触发所需的操作。您还应确保处理失败案例，即 URL 错误、服务器已关闭或网络条件阻止成功下载。
@user3527063 绝对清楚 - 您正在侦听图像对象上的加载事件，而不是可能已经触发的窗口。

【解决方案2】：

我已经用我想要缓存的图像数组调用了自定义函数。使用 Jquery 'Deffered' 来保存下一个操作，直到所有图像都加载完毕。这工作得很好

var $deferredimages = $.Deferred();
var items = []; // load all the images paths

            PreloadImages(items, loadImageitem, function (){                
                 $deferredimages.resolve();
            })


function PreloadImages(items, preloadimages, allDone) {

    var count = items.length;

    // this callback counts down the things to do.
    var pendingimages = function (items, i) {
        count--;
        if (0 == count) {
            allDone(items);
        }
    };

    for (var i = 0; i < items.length; i++) {
        // 'do' each thing, and await callback.
        preloadimages(items, i, pendingimages);
    }
}

function loadImageitem(items, i, onComplete) {
    var onLoad = function (e) {
        e.target.removeEventListener("load", onLoad);

        // this next line can be removed.
        // only here to prove the image was loaded.
        document.body.appendChild(e.target);

        // notify that we're done.
        onComplete(items, i);
    }
    var img = new Image();
    img.addEventListener("load", onLoad, false);
    img.src = items[i];
    img.style.visibility = 'hidden';
}

参考http://jsfiddle.net/8baGb/1/

【讨论】：