Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts

    loading progress bar

    how is it possible to do a loading progress bar,the msot simple way, i read taht you can make this in a very simple way using the image class(with the image array) or also using the image array so all your pics would load when the site starts but i think the first solution is easier(loading bar), i have a very simple site that uses html and css and if any of you knew about this simple java script loading bar?

  • #2
    Regular Coder feras_wilson's Avatar
    Join Date
    Jul 2005
    Location
    Sweden
    Posts
    129
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Here is your solution

    Hi!
    I found the script you wanted in this website:
    http://www.dynamicdrive.com
    http://www.dynamicdrive.com/dynamici...mlprogress.htm

    HEHE!
    Exp:
    PHP
    .NET

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Location
    Carmel California
    Posts
    471
    Thanks
    0
    Thanked 1 Time in 1 Post
    That dynamicdrive loading bar is time based, meaning it has nothing to do with if everything is loaded. I built a loading bar for images based on if they all loaded using document.images[].complete I found that each picture had to be loaded one by one into a hidden div to function properly.
    From an old thread, I dug up this.
    http://www.javascriptfr.com/code.aspx?ID=15834

    If you want, I could build you a easy snippet of code, but I might not be able to get to it for a while. The code for a loading bar I am using has ugly code so I wouldn't give that to you right now.
    Kris Hubby
    kwhubby site

  • #4
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    thank you and what would be the code for loading all the images as the site starts?, i know that is pretty simple to do this with the image array class.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by kwhubby View Post
    That dynamicdrive loading bar is time based, meaning it has nothing to do with if everything is loaded. I built a loading bar for images based on if they all loaded using document.images[].complete I found that each picture had to be loaded one by one into a hidden div to function properly.
    From an old thread, I dug up this.
    http://www.javascriptfr.com/code.aspx?ID=15834

    If you want, I could build you a easy snippet of code, but I might not be able to get to it for a while. The code for a loading bar I am using has ugly code so I wouldn't give that to you right now.
    Its not time based. Both progress bar scripts found on dynamic drive use documnt.images[].oncomplete.

    This is in the JS for the second version
    Code:
    function checkload(index){
    (images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
    }
    Version 1 of that script uses this
    Code:
    function checkLoad() {
    	if (currCount == preImages.length) { 
    		location.replace(locationAfterPreload)
    		return
    	}
    	for (i = 0; i <= preImages.length; i++) {
    		if (loaded[i] == false && preImages[i].complete) {
    			loaded[i] = true
    			eval("document.img" + currCount + ".src=dots[1].src")
    			currCount++
    		}
    	}
    	timerID = setTimeout("checkLoad()",10) 
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    thank you, the function check load works quite good, i just put it in the html files that got heavy images.


  •  

    Posting Permissions

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