jQuery.lazyload用于打印

试图让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') 。 它可以在chrome的开发工具或firebug中运行。 但是，在此上下文中运行时行为似乎不同，我无法弄清楚原因。

我很欣赏任何关于如何使其适用于打印机媒体的猜测。

Answer 1

我发现使用触发器只会导致部分图像加载，特别是在使用转换时，所以我尝试直接修改已经取得一些成功的图像。

这个解决方案适用于IE和Chrome，但仍然存在Mozilla Firefox的一些时间问题，它似乎不喜欢在按下打印按钮后加载内容（阻止？），尽管它会允许内容被更改/注入到页面中并且在图像已经加载后将在第二次打印请求上显示图像，遗憾地击败了目的。 Opera仍然是一个失败的原因，因为它目前不支持任何事件用于打印，也许当它们转换为webkit时？

尝试改变：

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

至

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

它仍然不是一个完美的解决方案，但它是朝着正确方向迈出的一步，至少对于使用IE或Chrome的约60％。

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