画像の遅延読み込み【範囲内一括】

画像毎ではなく、指定した範囲内の画像をまとめて遅延読み込みする方法を紹介します。 「画像の遅延読み込み」 を一部変更しています。

HTML

補足

• ３つの section クラス内に、３枚の画像を指定しています。

jQuery

補足

• section クラスの上端が、画面下端から 100 ピクセルを超えたら LOAD クラスを付加しています。
• LOAD クラスが付いた section クラス内の画像を対象に、遅延読み込みしています。

CSS

サンプル

「画像の遅延読み込み【範囲内一括】」のサンプル

関連記事

• 画像の遅延読み込み

スクロール時にアニメーションをつけて表示

スクロール時に、指定要素がウィンドウに入ったらアニメーションをつけて表示する方法を紹介します。

HTML

補足

• img 要素の data-animation 属性でアニメーションの種類を指定しています。

jQuery

補足

• スクロール時に、指定要素の上端が画面下から100ピクセルの位置を超えたら data-animation 属性に指定されたアニメーション用のクラスを付加しています。

CSS

補足

• あらかじめ data-animation 属性のついた img 要素を非表示にしています。
• data-animation 属性で指定しているアニメーション用のクラスを定義しています

サンプル

「スクロール時にアニメーションをつけて表示」のサンプル

関連記事

• スクロール時に指定要素がウィンドウ内に入ったらフワッと表示

スクロール時に外部ファイルのコンテンツを順次読み込む

スクロール時に、あらかじめ用意した外部ファイルのコンテンツを、つぎつぎに読み込む方法を紹介します。

HTML 【読み込み側】

HTML 【読み込まれる外部ファイル：report-2016.html】

補足

• li 要素の data-fname 属性に、読み込む外部ファイル名を指定しています。
• 読み込まれる外部ファイルには、３枚の画像が表示されるよう、 ul 要素を記述しています。

jQuery

補足

• li 要素の上端が、ウィンドウ下端から 100 ピクセルを超えたら data-fname 属性に指定した外部ファイルを読み込んでいます。
• 読み込んだら loaded クラスをつけて、li 要素の高さをコンテンツに合わせています。

CSS

補足

• li 要素に一画面分の高さを設定して、一度に読み込まれないようにしています。
• 読み込んだら、コンテンツに応じた高さになるよう jQuery で auto を設定しています。

サンプル

「スクロール時に外部ファイルのコンテンツを順次読み込む」のサンプル

関連記事

• スクロール時に指定要素がウィンドウ内に入ったらフワッと表示