Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide

JavaScript Preloader for large HTML page?

Question posted by: chunk1978 (Familiar Sight) on March 12th, 2007 07:06 PM
hi there...

i have a large HTML page (approx 200kb)... since ActionScript is quite similar to JavaScript, i'm curious weather it's possible to design a "flash-like preloader" for HTML pages using JavaScript?

thanks...
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
acoder's Avatar
acoder
Site Moderator
10,653 Posts
March 13th, 2007
09:04 AM
#2

Re: JavaScript Preloader for large HTML page?
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.

Reply
chunk1978's Avatar
chunk1978
Familiar Sight
225 Posts
March 13th, 2007
12:25 PM
#3

Re: JavaScript Preloader for large HTML page?
Quote:
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.

Reply
acoder's Avatar
acoder
Site Moderator
10,653 Posts
March 13th, 2007
01:19 PM
#4

Re: JavaScript Preloader for large HTML page?
You're welcome.

Reply
chunk1978's Avatar
chunk1978
Familiar Sight
225 Posts
March 16th, 2007
04:12 PM
#5

Re: JavaScript Preloader for large HTML page?
Quote:
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?

Reply
chunk1978's Avatar
chunk1978
Familiar Sight
225 Posts
March 19th, 2007
06:44 PM
#6

Re: JavaScript Preloader for large HTML page?
so i've been following this tutorial: http://www.farzone.net/Tutorials/preLoadpages.zip

this is the online demo: http://www.farzone.net/Tutorials/pr...ges/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?

Reply
chunk1978's Avatar
chunk1978
Familiar Sight
225 Posts
March 20th, 2007
06:48 PM
#7

Re: JavaScript Preloader for large HTML page?
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...

Reply
huzefa07's Avatar
huzefa07
Newbie
2 Posts
February 3rd, 2008
01:30 PM
#8

Re: JavaScript Preloader for large HTML page?
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 !

Reply
huzefa07's Avatar
huzefa07
Newbie
2 Posts
February 3rd, 2008
01:34 PM
#9

Re: JavaScript Preloader for large HTML page?
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 !

Reply
acoder's Avatar
acoder
Site Moderator
10,653 Posts
February 3rd, 2008
03:57 PM
#10

Re: JavaScript Preloader for large HTML page?
Hi Huzefa, welcome to TSDN!

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

Reply
Reply
Not the answer you were looking for? Post your question . . .
180,431 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Top Javascript / DHTML / Ajax Forum Contributors