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にはまだタイミングの問題があります (ブロッキング?)。画像が既にロードされた後、2番目の印刷要求で画像を表示し、悲しいことに目的を破ります。 Operaは現在、印刷目的でどちらのイベントもサポートしていないため、おそらくそれらが Webkit に変換されたときに、まだ失われた原因ですか?

変更してみてください:

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

に

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

これはまだ完全な解決策ではありませんが、IE または Chrome を使用しているユーザーの少なくとも 60% にとっては、正しい方向への一歩です。

注: このコードをロード時に直接使用することもできます。これは、ページの残りの部分がロードされた後に画像を延期することで初期レンダリング時間を短縮するためです。もちろん、使用されるスクロール方法の帯域幅を節約することはできません。 lazyload プラグインで。

于 2013-04-13T18:54:10.427 に答える