JavaScript Preloader for large HTML page?

**acoder** · Mar 13 '07, 09:04 AM

Not too sure about pre-loader in Flash, but you can preload images. Also, you can use AJAX to load the Javascript after the page has loaded. There is also on-demand Javascript loading. If you store all the Javascript in one file, you can probably take advantage of caching to make the page load faster the second time.

**chunk1978** · Mar 13 '07, 12:25 PM

Originally posted by acoder

Not too sure about pre-loader in Flash, but you can preload images. Also, you can use AJAX to load the Javascript after the page has loaded. There is also on-demand Javascript loading. If you store all the Javascript in one file, you can probably take advantage of caching to make the page load faster the second time.

i figured as much...it was a long shot, but worth asking ;-)... thanks acoder.

**acoder** · Mar 13 '07, 01:19 PM

You're welcome.

**chunk1978** · Mar 16 '07, 04:12 PM

Originally posted by acoder

You're welcome.

i just came across a recent post from another member who was inquiring about something similar... only instead of a flash (or flash-like) preloading bar, a simple text message displaying "Page Loading - Please Wait" appears while the page loads, then disappears when the page is loaded...

unfortunately i didn't quite understand how i would incorporate this code in my own script...

is there a way to simply display "Page Loading - Please Wait" perhaps on a top HTML layer (which would hide the loading page, second layer, below), and then once the page is loaded, the top layer with the loading message would disappear...

what do you think?

**chunk1978** · Mar 19 '07, 06:44 PM

Preloading HTML With Javascript

so i've been following this tutorial: http://www.farzone.net/Tutorials/preLoadpages.zip

this is the online demo: http://www.farzone.net/Tutorials/pre...es/preload.htm

it seems really sketchy... i've tried to incorporate it into my own site, but the loadbar seems to stall nearly all the time... the code is also about 10 years old, so maybe it's just too old to work effectively(?). ..

is there an easy way to have a "preload page" (with a simple animated gif) to display only until the final (loaded) page is ready to be displayed? i just can't seem to get the gist of how this would work... i've tried several attempts at this, but i always seem to paint myself into a corner...

i just need a simple script that would essentially tell an image(.gif) to display, and remain displayed, until the final page has finished loading...

any ideas?

**chunk1978** · Mar 20 '07, 06:48 PM

issues solved... sorta... for anyone interested, i'll just document here the problem further, and how i solved it...

first, i didn't use the above mentioned HTML preloader...

the problem is that i have a 200KB+ HTML file with lots of javascript embedded, so it takes a while for the browser to load... it's suggested that a Flash movie that's above 100KB in size contain a preloader, so i was trying to employ something similar for this HTML page.

i assigned a DIV to display an animaged .gif ("loader") near the top of the html code (just after <style> tags, where i ended the <head> tags and started the <body> tags)... this div is hidden by default (which allows for <no script> content to work if no javascript is active). after the <no script> tags, i began my many many lines of javascript with a single code to display the "loader" DIV, then at the very end of the html there's another javascript command to hide the "loader" DIV.

it feels slightly perverse to have all those lines of javascript within the HTML's body tags, but there was just no other way. since there are nearly 3000 lines of code for this one HTML page, the code is loaded line by line, like a book (i assume), so it is possible to install a loading message to users this way...

**huzefa07** · Feb 3 '08, 02:30 PM

i want a source code for doing this tutorial of loading the page with the help of javascript on the browser.

please can u help me out !

**huzefa07** · Feb 3 '08, 02:34 PM

i want my xhtml page to load from top to bottom in the browser, is there any way to do it.

can anybody help me out !

**acoder** · Feb 3 '08, 04:57 PM

Hi Huzefa, welcome to TSDN!

You may find this article helpful. It may need some adaptation, though.

**Snegoalthorp** · Feb 10 '10, 06:35 PM

Loading Layer

I don't know if this will be helpful or not, but I have used Loading Layers in the past and they seem to work pretty well.

First, set up your loading layer within the body tags of your HTML document:

<img id="loading_lay er" src="http://bytes.com/images/a_loading_layer .jpg" width="960" height="1650">

Within your style tags, write the style for the layer and make sure the z-index is higher than all of your other layers:

#loading_layer{ position:absolu te; width:960; height:1650; top:0; left:0; z-index:100000000 0;}

Then, write the function that will hide the loading layer when the page finishes loading.

function hideLoadingLaye r(){
document.getEle mentById("loadi ng_layer").styl e.visibility="h idden";
}

Finally, all you have to do is insert the function into the opening body tag with the onLoad event handler.

<body onLoad="hideLoa dingLayer();>

Hope this is helpful! {note: in some browsers, swfs show up on top of the loading layer regardless...wh at you can do to fix this is give them a starting style with position left and top set to negative values, such as -1000, and then onLoad have them move into their correct positions.}

JavaScript Preloader for large HTML page?

JavaScript Preloader for large HTML page?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment