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リクエスト全体ではなく、一部のレンダリングをフロント側で遅延させる使い方も出来る。