HTMLを先に読んで、ページの一部分だけ Ajax で読み込む方法

カテゴリ: JavaScript, jQuery

記事投稿日: 2013年9月10日



作ってみると、用途が広がりそうだったのでメモしておきます。

ページの骨子にあたる部分(HTML)は先に読み込んでおいて、
時間のかかる読み込み部分をAjaxで読み込む時の
処理になります。

ローディング画像をページ全体に表示すれば、
いっさいの操作をさせないことも可能ですし、
読み込んでいる対象だけに重ねれば、
部分読み込みの形になりそうです。

// ポイント① ページの読み込みが終わったらAjax通信を始める
$(window).load(function(){
    $.ajax({
        type: "GET",
        url: "hoge.php?product_name="+product_name+"",
        // ポイント② 送信前にローディング画像を表示する
        beforeSend: function(){
            $('#fade').fadeIn();
        },
        success: function(html){
            $("#product_list_view").html(html);
        },
        error: function(html){
            alert("見つかりません");
        },
        // ポイント③ 通信が終了したらローディング画像をフェードアウト
        complete : function(data){
            $('#fade').fadeOut(1500);
        }
    });    
});

ローディング機能についての詳細は前回の記事を参考にしてください。








コメントを残す

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

CAPTCHA




トップに戻る