Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Javascript preloader

Posted on 2003-11-04
6
7,370 Views
Last Modified: 2012-08-14
I currently have this script which shows a loading bar within a layer and when all elements have loaded the layer hides itself. It works fine just to load the visible elements, but I have many rollover images, which it doesnt seem to be preloading? I can see it is still loading the elements in the browser loading bar at the bottom right.

What I want it to do is leave the loading layer visible until it has loaded all images?

TIA

<head>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Gilbert Davis -->
<!-- Begin
function loadImages() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'hidden';
}
else { // IE 4
document.all.hidepage.style.visibility = 'hidden';
}
}
}
// End -->
</script>
</head>

<body OnLoad="loadImages()">

<!-- PRELOADER -->

<div id="hidepage"
style="position: absolute;
left:0px;
top:0px;
background-color: #253E6C;
layer-background-color: #253E6C;
height: 100%;
width: 100%;">

<table height="100%" width="100%" align="center">
<tr><td valign="middle" align="center">
Page loading ... Please wait
</td></tr></table>

</div>
0
Comment
Question by:tron2k3
  • 3
6 Comments
 
LVL 16

Accepted Solution

by:
jaysolomon earned 63 total points
ID: 9679811
all you have here is a fake loader.

It is not preloading anything at all.

To preload images you need to use this

img1 = new Image();
img1.src = "/images/img1.gif";
img2 = new Image();
img2.src = "/images/img2.gif";

..

And so on.


In order for your fake progress bar to work, you would need to use setTimeout and set it to hide after n of seconds
0
 

Author Comment

by:tron2k3
ID: 9679904
is there a way so i can have a preloading bar that truly simulates the progress of the loading?

tia
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9679974
Server Side Yes

Client Side? Not Really,but here is a link to (kellybelly) site she is developing and she has a progress bar on it. I do not think she will mind me posting the link to it. View her source and you will see how she done it

http://local.colite.com/web/led/newIndex.asp
0
 
LVL 3

Assisted Solution

by:makc
makc earned 62 total points
ID: 9680256
client side, yes, too. you have to put, say, 10 layers like <DIV ID=L0>0%</DIV>, <DIV ID=L1>10%</DIV>, ... in the very beginning of the document; than, after equal portions of html to load, put
<SCRIPT>
L0.style.display="none";
L1.style.display="block";
</SCRIPT>
...
<SCRIPT>
L1.style.display="none";
L2.style.display="block";
</SCRIPT>

... of coz, positioning, initial invisibility, etc, applies, but you got the picture, right ?
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10352618
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Split: jaysolomon {http:#9679811} & makc {http:#9680256}

Please leave any comments here within the next four days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question