在隐藏的DIV中打印图像在Chrome中失败

Question

Chrome 24

我现在正在重写一个网站，它有一些奇怪的功能。有一个页面，用户可以在其中选择要打印的图像。

用户勾选他们想要的图像的复选框，然后单击一个按钮，该按钮会回调服务器，并为给定的图像注入所需的HTML到隐藏的DIV中。

为了使事情进一步复杂化，image src属性实际上是一个链接到。net MVC服务器端操作，从数据库中检索图像，然后在几个不同的地方渲染图像上的一些文本。

输出的HTML最终看起来像这样:

<div style="visibility: hidden;">
    <div id="PrintArea">
         <div><img width="1000" src="/Controller/GetImage/2"></div>
        <div><img width="1000" src="/Controller/GetImage/3"></div>
        <div><img width="1000" src="/Controller/GetImage/5"></div>
    </div>    
</div>

这是javascript中的第一步，ajax回调到服务器来填充这个PrintArea DIV。在此之后，我们执行以下操作:

//Print
$('#PrintArea').waitForImages(function () {
    $("#PrintArea").jqprint({ importCSS: true });
    //$.unblockUI();
});

为了适应服务器端加载图像，我们使用waitForImages jquery插件，然后使用jqprint打印内容。

为了完成这个等式，我们有一个打印样式表(主样式表是media="screen"，所以它应该是唯一的样式表)。

body * {
    visibility:hidden;
  }
#PrintArea, #PrintArea * { visibility: visible; }
#PrintArea { position: absolute;left: 0;top: 0; }
img { display: block !important; }

这在Firefox和IE中工作得很好。

Chrome不工作始终。将会发生的是，当三个图像被选中时，前两个将被显示，但第三个应该在第二页有时被显示和打印，但其他时候不是。它似乎是零星的，而且是随机的。

有什么建议或想法，或者如何让Chrome一致地打印跨分页符的图像?我们内部的想法是，Chrome的打印预览窗口实际上是在waitForImages调用完成之前渲染的，因此内容没有显示，但我还没有想出一个具体的方法来测试这一点。

谢谢

Answer 1

试试window load:

$(window).load(function() {
    // executes when complete page is fully loaded, including all frames, objects and images
    $('#PrintArea').waitForImages(function () {
        $("#PrintArea").jqprint({ importCSS: true });
        //$.unblockUI();
    });
});

当整个页面(包括所有帧、对象和图像)完全加载时，窗口加载事件执行得稍晚一些。因此，涉及图像或其他页面内容的函数应该放在窗口或content标签本身的load事件中。

来源:http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

关于chrome问题: http://forum.jquery.com/topic/document-ready-and-window-onload-difference