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

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

Вот что у меня есть:

$(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') только после того, как покопался в источнике. Он работает в инструментах разработчика хрома или в firebug. Однако при запуске в этом контексте поведение выглядит иначе, и я не могу понять, почему.

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


person Mike Shultz    schedule 28.02.2013    source источник
comment
Будьте осторожны, в строке 3 вы определяете глобальную переменную.   -  person Seb    schedule 23.06.2016


Ответы (1)


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

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

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

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

to

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

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

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

person Shaun    schedule 13.04.2013