スクロール時に、あらかじめ用意した外部ファイルのコンテンツを、つぎつぎに読み込む方法を紹介します。
HTML 【読み込み側】
HTML 【読み込まれる外部ファイル：report-2016.html】
補足
- li 要素の data-fname 属性に、読み込む外部ファイル名を指定しています。
- 読み込まれる外部ファイルには、３枚の画像が表示されるよう、 ul 要素を記述しています。
jQuery
補足
- li 要素の上端が、ウィンドウ下端から 100 ピクセルを超えたら data-fname 属性に指定した外部ファイルを読み込んでいます。
- 読み込んだら loaded クラスをつけて、li 要素の高さをコンテンツに合わせています。
CSS
補足
- li 要素に一画面分の高さを設定して、一度に読み込まれないようにしています。
- 読み込んだら、コンテンツに応じた高さになるよう jQuery で auto を設定しています。