jquery - フルDivのコンテンツを非同期にロードする

Question

div全体のコンテンツを非同期でロードする方法を探しています。これまで、div .orbit-wrapperをプリロードしていますが、非同期でロードされるのは背景画像のみです。ページが完全に読み込まれるまで、そのdiv内のすべての読み込みを遅らせたい。理想的には、背景としてajax-loader.gifを使用しますhttp://d.pr/DvKV

Answer 1

jQueryAjax.loadはあなたの友達です。この例をjQueryのドキュメントから直接コピーしました。下記参照：

$('#result').load('ajax/test.html #container');

これにより、test.htmlの#containerが現在のページの#resultに配置されます。

Answer 2

ここでは、div全体のコンテンツを非同期でロードする例を送信します。また、ページ内のすべてのdivで、各divに「data-url」を設定してクラス名を「partialContents」にするだけでも便利です。

<div class="partialContents" data-url="Your-URL">
</div>
<script>
$(document).ready(function() {

            var baseUrl = window.location.origin;//Load base URL

            $(".partialContents").each(function (index, item) {
                var url = baseUrl + $(item).data("url");
                if (url && url.length > 0) {
                    $(item).load(url);
                }
            });
        });
</script>