jQuery.lazyload与打印一起使用 [英] jQuery.lazyload to work with printing

问题描述

试图使jquery.lazyload用于打印和打印介质查询.在Chromium中几乎可以完成.但是，它将仅显示在屏幕"上，而不显示在打印"输出中.不知道这是由于lazyload的异步特性还是我的滥用所致.

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

我只是在深入研究源代码之后才找到了.trigger('appear').它可以在Chrome的开发工具或Firebug中运行.但是，在这种情况下运行时，行为似乎有所不同，我不知道为什么.

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.

推荐答案

我发现使用触发器只会导致部分图像加载，尤其是在使用过渡时，因此我尝试直接修改图像，这些操作取得了一些成功.

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.

此解决方案在 IE 和 Chrome 上效果很好，但是 Mozilla Firefox 仍然存在一些计时问题，似乎不喜欢加载内容在按下打印按钮(阻止?)之后，尽管它允许更改内容/将内容注入页面，并且将在图像加载后在第二个打印请求上显示图像，但令人遗憾地无法达到目的. Opera 仍然是一个失败的原因，因为它当前不支持出于打印目的的任何一个事件，也许当它们转换为Webkit时?

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?

尝试更改:

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

到

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

这仍然不是一个完美的解决方案，但这是朝着正确方向迈出的一步，至少对于使用IE或Chrome浏览器的约60％来说都是如此.

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.

注意:您也可以直接在加载时使用此代码，因为它仍然可以通过将图像推迟到页面其余部分加载之后来加快初始渲染时间，当然，它不提供on的带宽节省. lazyload插件中使用的滚动方法.

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.

这篇关于jQuery.lazyload与打印一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！