0

JQueryの.load（）を使用したAjax呼び出しの後に、JavaScriptを使用したhtmlをDOMに挿入することについて質問があります。

次のサンプルhtmlセクションを想定します。

<script>$(document).ready(function(){var e = $('#'+'@Servergenerated');})</script>

<div id='@Servergenerated'>Test Element</div>

上記のセクションをAjax呼び出しで返し、JQueryのload（）関数を使用して結果をDOMに挿入すると、マークアップレンダリングとスクリプトの両方がブロッキング呼び出しとして実行されますか？つまり、.load（）はJavaScriptで使用可能な単一のスレッドで実行されるため、同じメインページ上の他のJavaScriptを呼び出す前に、マークアップレンダリングとJavaScriptの実行の両方が確実に終了しますか？

Ajaxリクエストは$("#someElement").load(..)

上記の場合、JSは常に正しいhtmlとペアになっていると常に想定できますか（JSが現在ページで定義されているIDに対して実行されるように）

ただし、.load（）と.html（）の使用には違いがあります。

通常、私は$ .getを使用してデータを取得し、.html（）を使用してそれをDOMに挿入します。ただし、このコードはサードパーティのライブラリにあり、代わりに.load（）を使用しています。

4

1 に答える 1

1

を使用すると、コンテンツを取得するために非同期httpリクエストを実行する$().load(url,fn)ため、その行に続くコードはhtmlがページに追加される前に実行されます。$().load(url,fn)最後に例を参照してください。

覚えておくべきもう1つの重要なことは、$().load(url,fn)返されたhtmlにjavascriptが含まれている場合、コンテンツがページに存在する前にそのjavascriptが実行され、プラグインが正しく初期化されない可能性があることです。$().load(url,fn)このため、スクリプトを含むコンテンツを取り込むために使用しないことを強くお勧めします。

例：

console.log(1)
$("#div1").load("page1.html",function(){
    console.log("4 maybe 5")
});
console.log(2)
$("#div2").load("page2.html",function(){
    console.log("5 maybe 4")
});
console.log(3)

上記の例では、ログ1、2、3がこの順序で発生することが保証されていますが、4と5は、どのajaxリクエストが最も速く完了するかによって位置を入れ替えることがあります。$().load(url,fn)div1のコンテンツを要求することに成功するために、div2のコンテンツを使用または要求しない以外に、それを回避する方法はありません。

于 2013-02-04T21:51:28.233 に答える