在DOM准备就绪之前使用jQuery加载函数

Question

I have a page that renders HTML blocks from another page on the same domain using IDs. My current code:

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

While this loads the content correctly, there is a visible lag between the page loading and the jQuery content loading; depending on the DIV contents it sometimes a full second to display then it just pops into place. This is obviously due to the page not attempting to retrieve the HTML content until DOM Ready so I removed the ready function but the Load function doesn't run. If I use an iFrame instead it appears to load as the browser executes the code but I lose the ability to only include specific DIV IDs and it's difficult to make it responsive. Looked at $.ajax but apparently Load uses .ajax so it doesn't look like there will be a difference.

Simply put – how do I load specific DIV ids from another page without waiting for DOM Ready whether jQuery, JavaScript, iFrames or other method? Second question

Thanks

Answer 1

document ready will be triggered until the whole page were loaded, just remove it and .load() will be invoked after #testdiv had finish render on DOM. here's the example

<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/

Answer 2

Ajax is not instant, and nothing you do will change that. Therefore, there will always be some form of delay. You can reduce the delay by removing the need for $(document).ready() , however I suspect it still won't be enough to have it do what you were hoping for.

$.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'));
});

or leave your code as is minus $(document).ready and move it to after the target div just like in your example.

The only way to completely remove the delay would be to remove the need for using $.ajax by inserting the html directly into the page server-side.