jQuery.ajax + setTimeout + WordPressで遅延読み込みを行う
Ajaxリクエストを遅延させる
jQuery.ajaxのAjaxリクエスト全体を遅れて実行する場合には、
setTimeout関数を利用することで対応可能。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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コールバック内でも使用できる。
1 2 3 4 5 6 7 8 9 | 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リクエスト全体ではなく、一部のレンダリングをフロント側で遅延させる使い方も出来る。