WordPress:画像のLazy Loadによって印刷されない



本サイトではないのだが、別サイトで画像をLazy Loadさせていたがために、その画像が印刷対象にならないという現象があった。つまりこうだ(Firefoxで検証)。

  • 画像の貼り付けているページを表示する。
  • スクロールしないとページの中身すべては表示されないが、構わず印刷(あるいは印刷プレビュー)する。
  • 印刷内容に画像が入っていない。

これは、ページをスクロールしないと画像が読み込まれないLazy Load状態になっているからだ。

そもそもLazy Loadにした理由は、ページロードを高速化するためだった。

しかし、ページを印刷したいユーザとしては、「重要なページのようだから、印刷してじっくり読もう」と思っているはずであり、その場合には下までスクロールしたりはしないだろう。これは矛盾している。

解決法1

Lazy Loadをやめること。PageSpeed Insightsには「Lazy Loadにしろよ」と言われるが仕方がない。

解決法2

何らかの「印刷」ボタンを設置してあげて、そこできちんと画像の入ったPDFなり何なりを生成してあげる。

そもそも、ブラウザ側が「現在表示されているもの」を印刷しようとするがために問題が起こったのだから、「現在表示されているもの」とは別のコンテンツを提供してあげればよいことである。

ただ、そのような仕組みが簡単に可能かどうかは現在のところ未調査。