Looking for a "Page Is Loading" script

[Markxxx]

I know I have seen this, I'm not sure if it's on this site or not. Anyway I couldn't find it if it is. But I have use a pic viewer from a script on this site and on dial up it takes about a minute to load.

I am looking for a script that would say "Please wait images are loading," so the viewer will know the computer isn't locked and that once the images are all done loading the viewer will work fine.

I've also offered an alternative way for non-high speed users to load the images one at a time (two per page) but I do like the image viewer and it works great in dial up but I'd like to give the dial up viewer of the site a choice to wait at least

thanks

[Trinithis]

Okay, I've whipped up some code just for you

Insert this into your html (anywhere before the following script):

<div id="plzWait">Please Wait While Images Are Loading...</div>

It is useful to note that it does not need to be a DIV tag or have the text I have inside it. All you need is a tag with the id of "plzWait". You can even put tags within it, just as long as it's there. (If you do, those tags will dissapear along with it when it goes away). You can even use CSS, for example, you may want to center it or use asbsolute posistioning. Hell, you could even make the plz wait an IMG itself.

Anyway, now put the following code after all your img tags. The most obvious place is right before you end your BODY tag.

<script type="text/javascript">
var standards = (window.addEventListener!=undefined) ? true : false;
var imageArray = document.getElementsByTagName("img");
var plzWait = document.getElementById("plzWait");
for(var i=0; i<imageArray.length; i++) {
	imageArray[i].isLoaded = false;
	if(standards) imageArray[i].addEventListener("load", finishedLoading, false);
	else imageArray[i].attachEvent("onload", finishedLoading);
	}
function finishedLoading(e) {
	var o = (standards) ? e.currentTarget : e.srcElement;
	o.isLoaded = true;
	var bool = true;
	for(var i=0; i<imageArray.length; i++) {
		if(!imageArray[i].isLoaded) {
			bool = false;
			break;
			}
		}
	if(bool) plzWait.parentNode.removeChild(plzWait);
	}
if(imageArray.length==0) plzWait.parentNode.removeChild(plzWait);
</script>

If you want, you can put this into an external script file as well.



NOTE:
--------------------------------------------------------------------------------------------

I don't think this will work if you are dynamically creating images by using innerHTML or createElement, but I haven't tested it. It does work with IMG tags placed directly into your HTML.

If this is an issue, you could always try inserting all your images into your HTML at the top or something and set their style="display:none;" with their correct URI's set to them, such as:

<img style="display:none;" src="http://images.google.com/intl/xx-hacker_ALL/images/images_hp.gif" />

And then use your script file and totally ignore the images created with a display of none. Since they have the same URI, they will finish loading at the same time, and since my code acts upon the IMG's onload, when the scripted images are done, the hidden ones would be too, triggering the Please Wait text to dissappear.

--------------------------------------------------------------------------------------------