投稿プレビューで遅延読み込みされた画像を含める方法

当社のブログでは、画像に対して遅延読み込み(lazy load)を採用しており、HTML 内の data-src 属性に画像のソースを格納しています。そのため、「全文を表示」ボタンを使用すると、画像が読み込まれません。画像が正しく読み込まれるように設定する方法はありますか?

通常の画像マークアップ(ソースを src 内に記述)を使用しているブログ投稿の例(ディスコースフォーラムで画像が表示される場合):

遅延読み込みを使用している例(画像が表示されない場合):

はっきりとはわかりませんが、最近ブラウザに標準搭載されている印刷機能にも同じ制限があることに気づきました。画像をすべて読み込むために画面を一番下までスクロールしない限り、「PDF として印刷」すると画像が白抜けして表示されてしまいます。

はい、PDF への印刷は確かにそのようになります。ブラウザがレンダリングした最終的なマークアップに印刷用 CSS を適用しているため、それは正常な動作だと考えられます。

このボタンにどのようなパース処理を使っているかはわかりません(オープンソースだと承知していますが、Ruby は詳しくないので😅)。しかし、おそらく HTML ソースを直接パースしているのだと思います。その場合、カスタムの画像属性を読み取ろうとはしないでしょう。

画像ソースとして画像タグ内の指定されたカスタム属性を含めるための設定オプションを提案させてください。私たちはいくつかのバリエーションを使用しており、それらすべてをサポートできるようにすると便利だと思います。