HTMLを先に読んで、ﾍﾟｰｼﾞの一部分だけ Ajax で読み込む方法

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

ﾍﾟｰｼﾞの骨子にあたる部分(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);
        }
    });    
});

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