0

ページの一番下までスクロールしたら自動でコンテンツを読み込んでくれる「jQuery.bottom.js」

ページの一番下までスクロールしたら自動でコンテンツを読み込んでくれる「jQuery.bottom.js」

Facebookやtumblr、TwitterなどのSNSサービス等でよく見られる、ページの一番下までスクロールをすると、それ以前のコンテンツを自動的に表示してくれる「jQuery.Bottom.js」をご紹介します。コンテンツが多くなるとページ送りで別ページへ遷移する構造もありますが、自動読み込みにすることでメリットのある場合には、取り込んでみるのも良いかもしれません。

 

1.jQuery.Bottom.jsをダウンロード

 GitjHub query_bottom

 

2.jQueryとjquery.bottom.jsを読み込む

 

3-1.サンプル[表示エリア限定(Loading…テキスト表示)]の場合

sample1

 

DEMO3-1

 

3-1-1.JavaScriptを記述

 

proximityオプションには、ページをスクロールした際に最下部のどのあたりに到達したらbottom.jsを発生させるかのタイミングを指定します。この場合は「#wrapの底から0.05という指定」。

bottom.jsのイベントが発生している間(追加のコンテンツを読み込んでいる間)は「Loading…」というテキストを表示させ、イベント終了時には「Loading…」テキストを非表示にしています。

setTimeoutには追加するコンテンツの処理を記述し、その際は「Loading…」テキストを非表示にし、イベント処理が完了したら「loading(読み込み)」をfalseにします。

また、スクロールの位置がイベントを発生する位置にある時(ページの最下部)に、ページを “リロード” すると追加要素が連続で表示してしまうので下記の一文を追加します。

 

3-1-2.CSSを記述

 

3-1-3.HTMLを記述

 ※ページを開いた段階で、最初に表示される要素すべてが画面上に表示されていると「bottom.js」イベントが発生しないのでその際は、ウィンドウサイズを小さくして確認してください。

 

3-2.サンプル[ページ全体(Loading…テキスト表示)]の場合

sample2

DEMO3-2

 

3-2-1.JavaScriptを記述

 今回は「window」の最下部に到達したらbottom.jsが発生するように指定。

 

3-2-2.CSSを記述

 

3-2-3.HTMLを記述

 ※ページを開いた段階で、最初に表示される要素すべてが画面上に表示されていると「bottom.js」イベントが発生しないのでその際は、ウィンドウサイズを小さくして確認してください。

 

 

ここまで2つのサンプルを見てきましたが、両方ともに言えることが追加で読み込むテキストが同じものを繰り返し読んでいるだけ…、になってしまっています。厳密にはこのようなLoading…を利用したい際は、同じものを読み込むのではなく常に「過去の記事」や「以前のコンテンツ」などすべて違ったものを読み込むという使い方になるのではないかと思います。そこで、次は読み込むものに番号を付けて、すべて違うものを読み込むベースとなるサンプルを見ていきたいと思います。

 

3-3.サンプル[表示エリア限定(Loading…テキスト表示)]の場合

sample3

DEMO3-3

 

3-2-1.JavaScriptを記述

 今回は「window」の最下部に到達したらbottom.jsが発生するように指定。

 

3-2-2.CSSを記述

 

3-2-3.HTMLを記述

 ※ページを開いた段階で、最初に表示される要素すべてが画面上に表示されていると「bottom.js」イベントが発生しないのでその際は、ウィンドウサイズを小さくして確認してください。

 

3-4.サンプル[ページ全体(Loading画像表示)]の場合

sample4

DEMO3-4

 

今回はローディングする際に「Loading…」というテキストではなく「ローディング画像(load.gif)」を表示するようにしてみます。

load (load.gif)

 

3-4-1.JavaScriptを記述

 今回は「window」の最下部に到達したらbottom.jsが発生するように指定。

 

3-4-2.CSSを記述

 

3-4-3.HTMLを記述

 ※ページを開いた段階で、最初に表示される要素すべてが画面上に表示されていると「bottom.js」イベントが発生しないのでその際は、ウィンドウサイズを小さくして確認してください。

 

以上になります。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > ページの一番下までスクロールしたら自動でコンテンツを読み込んでくれる「jQuery.bottom.js」