クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery プラグインlazyload.js(画像の遅延読み込み)

投稿日:

スクロールすると画像がふわっと表示されるようなサイトを良く見ますよね。
あれは画像の遅延読み込みという事をしているそうです。
ページロード時にでは無く、スクロールで特定の位置に来た時に初めて画像を読み込んでいるようです。

ページロード時には画面に表示される画像以外を読み込んでいないため、ページの表示までの時間も高速になります。
オシャレさと実用性を兼ね備えた工夫ですね!

今回はこの「画像の遅延読み込み」が出来るプラグイン「lazyload.js」を使ってみましょう。
lazyload.jsの公式サイトはこちらです。

サンプルも作りましたので見てくださいね。

jQueryとlazyloadの読み込み

まずはjQueryとlazyloadを読み込みましょう。
CDNが用意されていますので、テストではこちらを使わせてもらいましょう。

 

HTML側で画像を表示

画像が表示されるHTMLを作りましょう!
どんなものでもOKですが、スクロールが発生するように複数個の画像が縦に並ぶように作ると良いと思います。

imgタグを作る上で注意点が3つあります。

  1. 3行目:クラスに「lazy」を付加する(lazyという名前で無くてもOK)
  2. 4行目:「src」にはダミー画像へのパスを記述する
  3. 5行目:「data-original」に画像のパスを記述する

JS側に処理を記述

スクリプトに以下の処理を記述します。

2行目にはHTMLでimgタグに付加したクラス名を記述します。
その他パラメーターの詳細については公式サイトを参照してくださいね。

たったこれだけで画像が遅延読み込みされるページを作成することができます!
サンプルも作っていますので色々と試してみてくださいね。

-jQuery

執筆者:

関連記事

jQuery 文字の大きさ(フォントサイズ)の変更(小中大)

jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …

jQuery CSSクラスの追加と削除

jQueryを使うとHTMLやCSSだけでは実現できないような動きをサイトに付けることができます。 今回は例としてボタンクリックされた時に「CSSのクラスを追加」もう一度クリックすると「CSSクラスを …

jQuery ページの最上部へスクロールする処理(サンプル付き)

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …

jQuery クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

jQueryを使えば、タグにクラスを追加したり削除したりすることが簡単にできます。 今回はクリックされた「li」にクラスを追加して、クリックで色が付くメニューを作成してみようと思います。 こんなイメー …


comment

メールアドレスが公開されることはありません。