Using jQuery Load Function before DOM Ready

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

simple... remove `jQuery(document).ready(function(){`. It should work fine *if your code is **exactly** as it is in your question*. note however there will likely still be a delay, one that you can't remove other than by removing the need to use ajax to get this content in the first place. — Kevin B, Jul 27 '16 at 16:54
Why the down vote? I stated removing the dom ready didn't work for me. Furthermore, this post http://stackoverflow.com/questions/15107074/jquery-load-not-working states the same problem and the resolution is DOM ready. — user1754738, Jul 27 '16 at 16:57
Updated comment above. Downvoting thereby indicating I haven't done any research when my OP stated I have and others here on SE have the same issue (basically what you suggest _should_ work but doesn't) isn't accurate. — user1754738, Jul 27 '16 at 17:02
well, no. the question is not useful. it states that the solution doesn't work, when it in fact does, and doesn't provide proof otherwise. — Kevin B, Jul 27 '16 at 17:04
`$(document).ready` is only needed if you're code is executed before the element in the dom. Your example shows the opposite of that, therefore it should work just fine without it. — Kevin B, Jul 27 '16 at 17:06

score 1 · Answer 1 · answered Jul 27 '16 at 17:26

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

score -4 · Answer 2 · answered Jul 27 '16 at 17:22

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.

Using jQuery Load Function before DOM Ready

2 Answers2