にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:37.

今見えている範囲の画像だけを先に読み込んで、スクロールしないと見えない画像は後回しにする方法

閲覧者がスクロールするまで画像の読み込みを待つ方法画像の掲載が多いウェブページで段組が使われている際などでは、「ページの下の方にある画像」を読み込む処理のために、「今見えている範囲内の画像」の読み込みが遅れてしまうことがあります。

閲覧者に待ち時間を意識させないようにするには、「今見えている範囲の画像」を優先的に読み込んでくれるのが望ましいですよね。
「今見えている範囲の画像」さえ早く表示されれば、たとえページ全体の読み込み完了までに時間がかかったとしても、体感待ち時間は軽減できます。

画像の読み込みを遅らせるスクリプトを活用すれば、《閲覧者が(画像の表示位置まで)スクロールして来ない限り》画像を読み込まないようにできます。

jQueryを使って動作する画像読込遅延スクリプト「Lazy Load Plugin for jQuery」を利用して、閲覧者がスクロールするまで画像の読み込みを行わないようにする方法の解説記事を、All Aboutで公開しました。

閲覧者がスクロールするまで画像の読み込みを待つ方法(@All About ホームページ作成)

img要素の記述方法を特殊にするなど、HTML側のソース修正も必要ではありますが、作るのは簡単です。
画像の多いページなどで、ぜひ試してみて下さい。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---