前回無限スクロールの仕組みを紹介しましたが、今回は、Ajax通信を使って、外部のHTMLファイルを同的に読み込んだ無限スクロールの仕組みを紹介します。

サンプルを見る

外部ファイルの読み込み

jQueryでデータの読み込み処理を行う場合は、「Ajaxメソッド」を使います。 基本的な使い方は、下記のようになります。

$.ajax({
    type: 'GET',
    url: 'load' + counter + '.html',
    dataType: 'html'

//読み込みが終了した場合の処理
}).done(function(data)
{
    $('#wrap').append(data);
//読み込みエラー時の処理
}).fail(function()
{
    counter = 9999;
});

それでは、個々のプロパティを説明します。

type：リクエストの種類です。「POST」か「GET」を指定します。
url：外部データのURLです。もちろん、PHPなどのアプリケーションも指定できます。
datType：外部データが何形式のファイル化を指定します。「json」「xml」「html」などが指定できます。

次に、コールバック、エラー系のメソッドを開設します。
Ajaxメソッドでは、Ajaxメソッドの記述の終わりに、「.」ドットで繋げて、コールバックメソッドを記述します。

ちょっと分かりづらいですが、太字の部分がそれに該当します。
それぞれ

done：読み込みが終了した場合の処理。
fail：何らかの理由で、読み込みエラーが出たとき。
always：読み込みの成功・失敗にかかわらず実行する処理。

それでは今回のソースを解説します。

$(window).on("scroll" , function(e)
{
    var bottomPos = 100;

    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();

    if (scrollPosition > scrollHeight - bottomPos)
    {
        appendFunc();
    }
});
var counter = 1;
function appendFunc()
{
    if(counter == 9999)
    {
        return;
    }

    $.ajax({
        type: 'GET',
        url: 'load' + counter + '.html',
        dataType: 'html'

    }).done(function(data)
    {
        $('#wrap').append(data);
    }).fail(function()
    {
        counter = 9999;
    });

    counter++;
}

スクロール部分の動作は、前回とは、あまり変わっていません。 変わったのは、スクロールバーが下についたときの処理を、先述したAjax処理に入れ替えています。

ここではHTMLファイルを読み込んでいますが、もちろんデータ形式は何でも構いませんね。

また、単純にHTMLを読み込むのでは面白くないので、読み込みファイルを連番化して、読み込みエラーが発生したら、カウント用の変数に「9999」を代入し、カウント用の変数が9999だった場合は読み込みを実行しない。 つまり、「連番ファイルの末尾に達したら、読み込みしない。」という処理を入れています。

これをそのまま応用すれば、動的な無限スクロールが作れます。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナーの講師としてもおなじみ。