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

Presented by Nishishi via Movable Type. Last Updated: 2017/06/21. 12:23:45.

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

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

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

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

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

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

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

コメント

コメント数: 0件

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



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

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

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