jQuery.lazyload to work with printing

Question

Trying to get jquery.lazyload to work for printing and the print media query. It almost kind of works in Chromium. However, it will only display on 'screen' and not in the 'print' output. Not sure if this is due to the async nature of lazyload or my misuse.

Here's what I've got so far:

$(document).ready(function() {
    if (Modernizr.mq('only all')) { // check of mq support
        print_mq = window.matchMedia('print')
        print_mq.addListener(function(mql) {
            if (mql.matches) {
                $("img.lazy").trigger('appear');  // load lazy loaded imags before print
            }
        });
    } else {
        window.onbeforeprint = function () { 
            $("img.lazy").trigger('appear');
        }
    }
});

I only found .trigger('appear') after digging through the source. It works running in chromium's dev tools or firebug. However, the behavior appears to be different when run in this context and I can not figure out why.

I'd appreciate any guesses as to how to get this to work for printer media.

Answer 1

I found that using the trigger results in only partial image loads, especially when using a transition, so I tried directly modifying the images which had some success.

This solution works well for IE and Chrome but still has some timing issues with Mozilla Firefox which doesn't seem to like loading content after the print button is pressed (Blocking?), although it will allow content to be altered/injected into the page and will show the images on a second print request after the images have already loaded, defeating the purpose sadly. Opera is still a lost cause as it doesn't currently support either event for the purposes of printing, perhaps when they convert to webkit?

Try changing:

$("img.lazy").trigger('appear');

to

$("img.lazy").each(function(){
    $(this).attr('src',$(this).attr('original'));
});

It's still not a perfect solution but it's a step in the right direction, at least for the ~60% using either IE or Chrome.

Note: You could also use this code directly on load as it still speeds up the initial render time by deferring the images to after the rest of the page has loaded, of course it doesn't offer the bandwidth saving of the on scroll method used in the lazyload plugin.