「もっと見る」段階表示ローダー
ボタンを押すたびに次の一定件数だけを描画していく「もっと見る」型のローダーです。JavaScript で総数 TOTAL と1回あたりの追加数 STEP を定め、 load() が呼ばれるたびに現在位置 cur から次の区切りまでの要素を生成してグリッドへ追加します。
解説
ボタンを押すたびに次の一定件数だけを描画していく「もっと見る」型のローダーです。JavaScript で総数 TOTAL と1回あたりの追加数 STEP を定め、load() が呼ばれるたびに現在位置 cur から次の区切りまでの要素を生成してグリッドへ追加します。新しく入った要素には @keyframes lm-fi によるフェードインが当たり、唐突に増えず自然に現れます。残り件数はボタンのラベルに反映され、すべて表示し終えると disabled になり文言が切り替わります。
向く場面と注意
ブログ一覧、商品グリッド、検索結果など件数が多い一覧の初期表示を軽くしたいときに有効です。一度に全件を出さないので最初の描画が速く、ユーザーの操作で必要な分だけ読み込めます。本番では生成部分を実データの取得処理に差し替え、サーバーから次のページを fetch して追加する形にします。注意点として、無限スクロールと違いボタンは確実に止められる利点がある一方、追加した内容にフォーカスや読み上げが移らないため、スクリーンリーダー利用者向けには追加件数を知らせる工夫があると親切です。
よくある質問
1回に表示する件数を変えたい。
スクリプト冒頭の STEP の値を変更してください。総件数は TOTAL で決まり、残りが0になるとボタンが自動的に無効化されて文言が切り替わります。
実際のデータと連携できますか。
できます。要素を作っている部分を、サーバーから次ページを取得する fetch 処理に置き換えれば実データに対応します。取得後に同じ要領でグリッドへ追加すればフェードインもそのまま効きます。