【LPや画像の多いブログに必須。速度改善lazyLoad】
画像がブラウザの視野に入る直前まで
読み込まれないように抑制することで、
ページの読み込み時間を改善。
<仕組み>
ブラウザのスクロールが発生するたびに
JavaScript(jQuery)でスクロール量を検出。
画面の一番上から画像のタグまでの距離と、
スクロール量を比較して、画像がブラウザの
視野に入ったかどうかを調べるため。
視野に入っていれば、HTML5の data 属性に
設定された「本来の画像ファイルのパス」を
src属性に設定。
src属性に画像ファイルのパスが設定されると
ブラウザはその画像を読み込みにいく。
以上の仕組みによって、
まだ画面に入っていない画像は後から読み込み
される(遅延ロード)ことになるので、
ページが表示されるまでの時間短縮につながる。
cly7796.net
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓
【1】CODEMYマンツーマンレッスン
codemy-lesson.office-ing.net⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン
▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
【2】プログラミング講座CODEMY
office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン
自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。