DOMレディの前にjQueryロード機能を使用する

Question

IDを使用して同じドメインの別のページからHTMLブロックをレンダリングするページがあります。現在のコード：

<div id=”testdiv”></div> 
<script> 
jQuery(document).ready(function(){ 
    jQuery('#testdiv').load('/references/embed1.html #testdiv2'); 
}); 
</script> 

これはコンテンツを正しく読み込む一方で、ページ読み込みとjQueryコンテンツ読み込みの間に目に見える遅れがあります。 DIVの内容に応じて、時には完全な秒が表示されます。これは明らかに、DOM ReadyまでHTMLコンテンツを取得しようとしていないページが原因です。したがって、準備機能を削除しましたが、ロード機能は実行されません。代わりにiFrameを使用すると、ブラウザがコードを実行する際に読み込まれるように見えますが、特定のDIV IDのみを含む能力がなくなり、応答性にするのは難しくなります。 $ .ajaxを見ましたが、明らかにLoadは.ajaxを使用するため、違いがあるようには見えません。

簡単に言えば、jQuery、JavaScript、iFramesなどの方法を問わず、DOMを待つことなく別のページから特定のDIV IDを読み込むにはどうすればよいですか？ 2番目の質問

おかげ

Answer 1

アヤックスは、インスタントではなく、あなたが何もそれを変更しません。したがって、常にいくつかの遅延があります。あなたは$(document).ready()の必要性を取り除くことによって遅延を減らすことができますが、私はまだそれがあなたが望んでいたことをするのに十分ではないと思われます。

$.get('page.html', function (result) { 
    // note, you may need to use `.filter` rather than `.find` depending on the structure of `result` 
    $('#target').html($($.parseHTML(result)).find('#target2')); 
}); 

または$(document).readyマイナスであるとして、あなたのコードを残して、ちょうどあなたの例のように、ターゲットのdivの後に移動します。

遅延を完全に除去する唯一の方法は、htmlをページサーバー側に直接挿入して$.ajaxを使用する必要性を取り除くことです。

Answer 2

document readyは、ページ全体が読み込まれるまでトリガーされ、削除するだけで、#testdivがDOMでレンダリングされた後に​​が呼び出されます。 は、ここでは例

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

<div id="testdiv"></div> 
<div id="error"></div> 

<script> 
$("#testdiv").load("/references/embed1.html #testdiv2", function(response, status, xhr) { 
    alert("Triggered"); 
    if (status == "error") { 
    var msg = "Err trying to load "; 
    $("#error").html(msg + xhr.status + " " + xhr.statusText); 
    } 
}); 
</script> 

https://jsfiddle.net/Angel_xMu/rer3yuny/1/