Results 1 to 2 of 2

Thread: Looking for a "Page Is Loading" script

  1. #1
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Looking for a "Page Is Loading" script

    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

  2. #2
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

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

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

    HTML Code:
    <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.

    Code:
    <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:

    HTML Code:
    <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.

    --------------------------------------------------------------------------------------------
    Last edited by Trinithis; 05-21-2007 at 12:09 AM. Reason: Clean up a bit & changed isNav to standards

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •