Printing Images in a hidden DIV failing in Chrome

Question

Chrome 24

I'm working on a site re-write right now that has a curious bit of functionality. There is a page where is a user is given a list of options to select images to print.

The user checks off the checkboxes of the images they'd like, and then they click a button that makes a call back to the server and for the given images injects the wanted HTML into a hidden DIV.

To complicate matters a bit further the image src attributes are actually a link to a .NET MVC server side action to retrieve the images from a database where we grab the image and then render some text on the image in a few different places.

The output HTML ends up looking like this.

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

That's step one in the javascript, the ajax call back to the server to populate this PrintArea DIV. After this, we do the following:

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

To accommodate the server side loading the images, we use the waitForImages jquery plugin and then use jqprint to print the content.

To complete the equation, we have a print stylesheet (the main stylesheet is media="screen" so it should be the only stylesheet in play).

body * {
    visibility:hidden;
  }

#PrintArea, #PrintArea * { visibility: visible; }

#PrintArea { position: absolute;left: 0;top: 0; }

img { display: block !important; }

This works fine in Firefox and IE.

Chrome does not work consistently. What will happen is that when three images are selected the first two will be displayed but the third which should go on a second page sometimes is displayed and printed, but other times is not. It seems sporadic and quite random.

Any suggestions or ideas or how to get Chrome to consistently print the images across page breaks? Our line of thinking internally here was that Chrome's print preview window was actually rendering before the waitForImages call finished and thus the content was not displaying, but I haven't come up with a concrete way of testing this.

Thanks

score 1 · Answer 1 · answered Jan 22 '13 at 22:13

Maybe try 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();
    });
});

The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

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

About chrome issue: http://forum.jquery.com/topic/document-ready-and-window-onload-difference

Hope it helps !

Printing Images in a hidden DIV failing in Chrome

1 Answers1