CODEWITHSUNDEEP
javascriptjqueryhtmlasynchronous
Narendra Rajput
Narendra Rajput

Reputation: 711

Loading webpage asynchronously

I have a WebApp in HTML5.

Here is the link

I wanted to load the whole webpage asynchronously. Like when the webpage is accessed I want to show the user a loading image and the page is loaded completely in async mode in the background. I tried to load the scripts async but it doesnt much affect its behavior.

Is there a way this is possible !

Upvotes: 4

Views: 3432

Answers (3)

Viren Rajput
Viren Rajput

Reputation: 5736

Try using the same method as Tobias Krogh suggested.

But rather than putting the contents in the #main by using plain old JS

document.body.innerHTML = request.responseText;

Use Jquery to put the contents in the body using .html()

$("body").html(request.responseText);

Edit: And load the CSS & JS using a JS loader. Possible Lazyload or YepNope, to load them asynchronously. That should do the Job !

Upvotes: 1

Tobias Krogh
Tobias Krogh

Reputation: 3932

render an empty body that only has a loading image as background set... in the head you have a script tag that does an ajax call on dom ready and loads the desired content...

EDIT: the desired content of course should contain every other markup and script tag that is needed... then update the body with the response

document.body.innerHTML = request.responseText;

EDIT 2: I recommend to write that head script in native javascript as you only need less < 1kb to make a clean (even cross-browser ajax working) call to a defined url... in your ajax response you can be sure nothing will be overwritten or loaded twice (besides maybe the ajax functionality if you load a library)

Upvotes: 2

Ivan Drinchev
Ivan Drinchev

Reputation: 19581

You could manage to do this by setting some kind of overlay with loader in your css which is visible ( at first ) and later after your page is fully loaded, remove the overlay ( fade it out ) with javascripting...

Something like this http://jsfiddle.net/6Ldyd/

Of course you should make some kind of callback function to remove the overlay after the last element of your page is loaded ( or script to call it after the last element is loaded )

Upvotes: 0

Related Questions