jQuery.lazyload для работы с печатью

Question

Попытка заставить jquery.lazyload работать для печати и запроса печатного носителя. Это почти отчасти работает в Chromium. Тем не менее, он будет отображаться только на "экране", а не на "печати". Не уверен, что это из-за асинхронного характера lazyload или моего неправильного использования.

Вот что у меня так далеко:

$(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');
        }
    }
});

Я только нашел .trigger('appear') покопавшись в источнике. Он работает в инструментах разработчика Chromium или Firebug. Тем не менее, поведение кажется другим при запуске в этом контексте, и я не могу понять, почему.

Я был бы признателен за любые предположения о том, как заставить это работать для печатных носителей.

Answer 1

Я обнаружил, что использование триггера приводит только к частичной загрузке изображений, особенно при использовании перехода, поэтому я попытался напрямую изменить изображения, которые имели некоторый успех.

Это решение хорошо работает для IE и Chrome, но все еще имеет некоторые проблемы с синхронизацией с Mozilla Firefox, который, похоже, не любит загружать контент после нажатия кнопки печати (Блокировка?), Хотя и позволяет изменять / вставлять контент на страницу. и покажет изображения во втором запросе на печать после того, как изображения уже загружены, печально победив цель. Opera по-прежнему безнадежна, поскольку в настоящее время она не поддерживает ни одно из этих событий для целей печати, возможно, когда они конвертируются в webkit?

Попробуйте изменить:

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

в

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

Это все еще не идеальное решение, но это шаг в правильном направлении, по крайней мере для ~60%, использующих либо IE, либо Chrome.

Примечание: Вы также можете использовать этот код непосредственно при загрузке, так как он все еще ускоряет начальное время рендеринга, откладывая изображения до загрузки остальной части страницы, конечно, он не предлагает экономию полосы пропускания используемого метода прокрутки. в плагине Lazyload.