Getting the browser to make an AJAX call as soon as possible while the page is still loading
I'm looking for tips on how to get the browser to immediately trigger an AJAX call to process a web page, ideally before the page is fully loaded.
Here's my rough motivation: I have a web page that takes, say, 5 seconds to load. It calls a web service which takes, say, 10 seconds to load. If the page load and the web service call occurred sequentially, the user will need to wait 15 seconds to view all the information. However, if I can start the web service call before the 5 second download is complete, at least some of the work can happen in parallel. Ideally, I would like to have as much of the work done in parallel as possible.
My initial theory was that I should place the AJAX javascript as high as possible in the HTML source of the webpage (remembering to place it after jquery.js is included, because I am making the call with jquery ajax ). I also don't remember not to wrap the AJAX call in a jquery ready event handler . (I mention this because prepared events are popular in a lot of jquery code examples.)
However, the AJAX call still doesn't fire as I hope (at least according to Google Chrome's "Timeline"), so I'm wondering what other considerations apply.
One thing that could potentially be detrimental is that the AJAX call goes back to the same web server serving the original web page, so I might be in danger of hitting the browser # HTTP connection restriction back to that machine? (The HTML page loads multiple images, css files, etc.)
a source to share
You can use the jQuery onavailable plugin which will be executed as soon as the element is displayed on the page. You can execute it as soon as the element that is on the page up.
a source to share