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

我们的应用程序中有一个打印功能，可以在浏览器中打印图像。我们正在使用所有图像源动态形成HTML div[图像源来自webservice 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>
<% });%>

“width=“98”height=“70”/>

在打印预览中，只有一张图像显示出来，其余的都是点。如果我取消打印并再次打印，所有的图像都显示出来了

谢谢，

---

Jeevitha

这完全可以通过使用JavaScript来完成

我已经创建了一个工作来显示这一点

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

---

您将能够在“网络”中看到请求“选项卡的Chrome开发工具，或使用优秀的。成功加载还将触发代码示例中添加的加载事件侦听器。

我已使用要缓存的图像数组调用了自定义函数。使用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';
}

var$deferredimages=$.Deferred（）；
变量项=[]；//加载所有图像路径
预加载图像（项，loadImageitem，函数（）{
$deferredimages.resolve（）；
})
函数预加载图像（项目、预加载图像、全部完成）{
var count=items.length；
//这个回调会倒计时要做的事情。
var pendingimages=功能（项目，i）{
计数--；
如果（0==计数）{
全部完成（项目）；
}
};
对于（变量i=0；i

---

Reference

如果您提供相应的源代码，它可能会很有用。请求资源（即在定位为不可见的

中）将获取资源，并在浏览器喜欢时将其缓存。然后可以监视IMG

onload

事件，以确保资源已被提取，并且可能已被缓存。您是否仍需要帮助Jeevitha，或者您的问题现在已得到解决？抱歉，响应延迟。我仍然有一个问题。我正在使用backbone.js，需要在创建模型的函数中缓存图像。我在问题中提供了更多细节。请帮帮我，谢谢。我尝试在创建视图模型的函数中实现以下内容。var cachedImage=新图像（）；addEventListener（'load'，函数（）{}）；cachedImage.src=''；var printmodel=new Backbone.Model（{Number:app.activeJob.get（'Number'），ID:app.activeJob.get（'ID'），HeaderLabel:titleString，}）；printmodel.set（'Documents'，arrDocuments）；但仍然不起作用。我无法使用windows onload，因为我尝试加载的所有图像都是动态的，并且都来自该服务。这对我来说部分有效。我需要等待加载所有要加载到缓存中的图像。当前，下一行甚至在下载映像之前就已经执行了。这是映像上加载事件侦听器的目的。脚本将立即继续到下一行，因此在成功加载映像后，您需要使用一个或多个回调函数来触发所需的操作。您还应确保正在处理一个失败案例，其中URL错误，服务器关闭，或者网络条件阻止成功下载。@user3527063请绝对清楚-您正在侦听的是图像对象上的加载事件，而不是可能已经启动的窗口。

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';
}