0

试图让 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')在挖掘源代码后才发现的。它可以在 chromium 的开发工具或 firebug 中运行。但是，在这种情况下运行时，行为似乎有所不同，我不知道为什么。

对于如何使它适用于打印机媒体的任何猜测，我将不胜感激。

4

1 回答 1

3

我发现使用触发器只会导致部分图像加载，尤其是在使用过渡时，所以我尝试直接修改成功的图像。

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

尝试改变：

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

至

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

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

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

于 2013-04-13T18:54:10.427 回答