Question

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

当我们触发'Windows.Print（）'时，只有第一张图像始终可用于打印预览（镶边），其余图像显示为空白。

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

请让我知道如何在打印前将所有图像压缩到缓存中。我需要在javascript中执行此操作。不想做任何改变。

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

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

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

谢谢，杰维萨

Answer 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。成功加载还将触发代码示例中添加的加载事件侦听器。

Answer 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/

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

2 个答案: