jquery load into a div is so slow as compare to loading a page in an ifram

Question

I am trying to load a page (located on the same domain) into a div, using load function by using the following code:.

 $(document).ready( function() {
      $("#webContent").load(url);
  });

its loading the page, but its too slow. it is loading each and every element of the page one by one, as i can see it in the firebug.

but if i am trying to load the same page inside an iframe, then its loading so fast. i think its loading aysc.

can anyone please explain the difference and the solution to download it into a div. i dont want to use iframe.

Best Regards

Answer 1

So, what have you tried? This:

$(document).ready( function() {
    $("#webContent").load(url);
});

And this, right?

<iframe src="http://example.com"></iframe>

Why the javascript solution is slower you ask?

Iframe starts loading right after the html got parsed to the place where your iframe is.

According to the jQuery documentation:

Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

The answer is NO, you can't make the JavaScript solution faster in this case.

There is a little test if you want it to show that there is no iframe-related speed bonuses over ajax:

Code for the first test case:

$(document).ready( function() {
    $("#webContent").load(url);
});

Code for the second test case:

$(document).ready( function() {
    $("#webContent").html('<iframe src="' + url + '"></iframe>');
});

Time needed to load the page will be approximately the same in both cases.