jQuery.ajax + setTimeout + WordPressで遅延読み込みを行う

Ajaxリクエストを遅延させる

jQuery.ajaxのAjaxリクエスト全体を遅れて実行する場合には、

setTimeout関数を利用することで対応可能。

setTimeout(function(){
    jQuery.ajax({
        type: 'POST',
        data: data,
        url: ajax_object.ajax_url,
        dataType: 'json',
        success: function(response){
            $('#engineer-side').append(response.side);
            $('#engineer-head').append(response.head);
            $('#engineer-foot').append(response.foot);
            $('#social').append(response.social);
        },
        error: function(response){
            console.log("error");
        }
    });
}, 5000);

jQuery.ajax()をsetTimeout()の1番目の引数に渡すことで、Ajaxリクエスト全体を遅延させることができる。上のコードの場合は、ページが表示されてから5秒後にリクエストが開始される。

レンダリングを一部だけ遅延させる

Ajaxリクエスト全体ではなく、ページの一部のレンダリングを遅延させることも可能。

上のコードでは、successコールバック内でappend()に対して、Ajaxで取得した結果をセットすることで、ページをレンダリングしている。

setTimeout()は、successコールバック内でも使用できる。

success: function(response){
    $('#engineer-side').append(response.side);
    $('#engineer-head').append(response.head);
    $('#engineer-foot').append(response.foot);
            
    setTimeout(function(){
        $('#social').append(response.social);
    }, 5000);
},

上のコードでは、ページ内の4か所をAjaxで取得した結果(部分HTML)でレンダリングしている。そして、その中の一部(#social)をsetTimeoutで遅延ロード化している。

Ajaxリクエスト全体ではなく、一部のレンダリングをフロント側で遅延させる使い方も出来る。

参考
WordPressでAjax
WordPressでソーシャルボタンを非同期化