4 Replies Latest reply on Feb 1, 2010 1:23 AM by M.R.Biesheuvel

    Creating a Javascript Preloader for my HTML sites... wont work..

    jbarnes5557

      Hey all,

       

      I am creating a Javascript Preloader for my html site (www.rockspire.com), I have scripted all actions and have come away with a bar that does not load. Can someone please direct me as to where the error may be.

       

      Thanks in advance!

       

      Site: www.rockspire.com

       

      Code:

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Index</title>
      <script type="text/javascript">
      <!-- begin hiding

       

      // You may modify the following:
      var locationAfterPreload = "index2.html" // URL of the page after preload finishes
      var lengthOfPreloadBar = 450 // Length of preload bar (in pixels)
      var heightOfPreloadBar = 10 // Height of preload bar (in pixels)
      // Put the URLs of images that you want to preload below (as many as you want)
      var yourImages = new Array(
      "images/lparch1.jpg",
      "images/lparch2.jpg",
      "images/lparch3.jpg",
      "images/lparch4.jpg",
      "images/lparch5.jpg",
      "images/lparch6.jpg",
      "images/lparch7.jpg",
      "images/lparch8.jpg",
      "images/lparch9.jpg",
      "images/lpart1.jpg",
      "images/lpart2.jpg",
      "images/lpart3.jpg",
      "images/lpart4.jpg",
      "images/lpart5.jpg",
      "images/lpart6.jpg",
      "images/lpart7.jpg",
      "images/lpbetty1.jpg",
      "images/lpbetty2.jpg",
      "images/lpbetty3.jpg",
      "images/lpbetty4.jpg",
      "images/lpbetty5.jpg",
      "images/lpnature1.jpg",
      "images/lpnature2.jpg",
      "images/lpnature3.jpg",
      "images/lpnature4.jpg",
      "images/lpnature5.jpg",
      "images/lpnature6.jpg",
      "images/lpnature7.jpg",
      "images/lpnature8.jpg",
      "images/lpnature9.jpg",
      "images/lpnature10.jpg",
      "images/lpnature11.jpg",
      "images/thumbnail_arch1.jpg",
      "images/thumbnail_arch1bw.jpg",
      "images/thumbnail_arch10.jpg",
      "images/thumbnail_arch10bw.jpg",
      "images/thumbnail_arch11.jpg",
      "images/thumbnail_arch11bw.jpg",
      "images/thumbnail_arch2.jpg",
      "images/thumbnail_arch2bw.jpg",
      "images/thumbnail_arch3.jpg",
      "images/thumbnail_arch3bw.jpg",
      "images/thumbnail_arch4.jpg",
      "images/thumbnail_arch4bw.jpg",
      "images/thumbnail_arch5.jpg",
      "images/thumbnail_arch5bw.jpg",
      "images/thumbnail_arch6.jpg",
      "images/thumbnail_arch6bw.jpg",
      "images/thumbnail_arch7.jpg",
      "images/thumbnail_arch7bw.jpg",
      "images/thumbnail_arch8.jpg",
      "images/thumbnail_arch8bw.jpg",
      "images/thumbnail_arch9.jpg",
      "images/thumbnail_arch9bw.jpg",
      "images/thumbnail_art1.jpg",
      "images/thumbnail_art1bw.jpg",
      "images/thumbnail_art2.jpg",
      "images/thumbnail_art2bw.jpg",
      "images/thumbnail_art3.jpg",
      "images/thumbnail_art3bw.jpg",
      "images/thumbnail_art4.jpg",
      "images/thumbnail_art4bw.jpg",
      "images/thumbnail_art5.jpg",
      "images/thumbnail_art5bw.jpg",
      "images/thumbnail_art6.jpg",
      "images/thumbnail_art6bw.jpg",
      "images/thumbnail_art7.jpg",
      "images/thumbnail_art7bw.jpg",
      "images/thumbnail_b1.jpg",
      "images/thumbnail_b1bw.jpg",
      "images/thumbnail_b2.jpg",
      "images/thumbnail_b2bw.jpg",
      "images/thumbnail_b3.jpg",
      "images/thumbnail_b3bw.jpg",
      "images/thumbnail_b4.jpg",
      "images/thumbnail_b4bw.jpg",
      "images/thumbnail_b5.jpg",
      "images/thumbnail_b5bw.jpg",
      "images/thumbnail_nat1.jpg",
      "images/thumbnail_nat1bw.jpg",
      "images/thumbnail_nat2.jpg",
      "images/thumbnail_nat2bw.jpg",
      "images/thumbnail_nat3.jpg",
      "images/thumbnail_nat3bw.jpg",
      "images/thumbnail_nat4.jpg",
      "images/thumbnail_nat4bw.jpg",
      "images/thumbnail_nat5.jpg",
      "images/thumbnail_nat5bw.jpg",
      "images/thumbnail_nat6.jpg",
      "images/thumbnail_nat6bw.jpg",
      "images/thumbnail_nat7.jpg",
      "images/thumbnail_nat7bw.jpg",
      "images/thumbnail_nat8.jpg",
      "images/thumbnail_nat8bw.jpg",
      "images/thumbnail_nat9.jpg",
      "images/thumbnail_nat9bw.jpg",
      "images/thumbnail_nat10.jpg",
      "images/thumbnail_nat10bw.jpg",
      "images/thumbnail_nat11.jpg",
      "images/thumbnail_nat11bw.jpg",
      "images/index_01.jpg",
      "images/index_02.jpg",
      "images/index_04.jpg",
      "images/index_05.jpg",
      "images/index_06.jpg",
      "images/index_13.jpg",
      "images/index_14.jpg",
      "images/overview.pdf",
      "images/Rockspire_Site_Map.pdf",
      "images/Rockspire_slideshow.flv",
      "images/main_concept_image.jpg",
      "images/main_contact_image.jpg",
      "images/main_events_image.jpg",
      "images/main_inspiration_image.jpg",
      "images/main_manifesto_image.jpg",
      "images/main_photos_image.jpg",
      "images/main_resources_image.jpg"
      )

       

      // Do not modify anything beyond this point!
      if (document.images) {
      var dots = new Array()
      dots[0] = new Image(1,1)
      dots[0].src = "images/black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
      dots[1] = new Image(1,1)
      dots[1].src = "images/red.gif" // color of bar as preloading progresses (same note as above)
      var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
      var loaded = new Array(),i,covered,timerID
      var leftOverWidth = lengthOfPreloadBar%coverage
      }
      function loadImages() {
      for (i = 0; i < yourImages.length; i++) {
      preImages = new Image()
      preImages.src = yourImages
      }
      for (i = 0; i < preImages.length; i++) {
      loaded = false
      }
      checkLoad()
      }
      function checkLoad() {
      if (currCount == preImages.length) {
      location.replace(locationAfterPreload)
      return
      }
      for (i = 0; i <= preImages.length; i++) {
      if (loaded == false && preImages.complete) {
      loaded = true
      eval("document.img" + currCount + ".src=dots[1].src")
      currCount++
      }
      }
      timerID = setTimeout("checkLoad()",10)
      }
      // end hiding -->
      </script>

       

      <style type="text/css">
      <!--
      body p {
          color: #333;
      }
      -->
      </style>
      </head>

       

      <body>
      <div align="center">
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p>
      <script type="text/javascript">
      <!-- begin hiding

       

      if (document.images) {
      var preloadBar = ''
      for (i = 0; i < yourImages.length-1; i++) {
      preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
      }
      preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
      document.write(preloadBar)
      loadImages()
      }

       

      // end hiding -->
      </script>
      </p>
      <p><font size="2" face="Helvetica Neue">Welcome to Rockspire...</font></p>
      </div>
      </body>
      </html>

       

       

      Cheers!

        • 1. Re: Creating a Javascript Preloader for my HTML sites... wont work..
          M.R.Biesheuvel Level 3

          function loadImages() {
          for (i = 0; i < yourImages.length; i++) {
          preImages = new Image()
          preImages.src = yourImages
          }
          for (i = 0; i < preImages.length; i++) {
          loaded = false
          }


          Something like:

          function loadImages(){
          for (i=0;i<yourImages.Length;i++){
               preImages[i] = new Image();
               preImages[i].src = yourImages[i];
               preImages[i].onload = //call a function when image is actually loaded (is an event)
          }
          

           

          But now the images are still load a-synchrone, so to keep track of the loading you must write something like this..

           

          var i=0;

           

          function loadImage(){

           

               if (i<preImages.Length){

                    preImages[i] = new Image;

                    preImages[i].src = yourImages[i];

                    preImages[i].onload = imageLoaded();

               }

           

          function imageLoaded(){

           

               i++;     //increase counter

               //do something with the preloader

               loadImage();

          }

           

          Hope this gets you on your way...

          • 2. Re: Creating a Javascript Preloader for my HTML sites... wont work..
            jbarnes5557 Level 1

            Thanks for the response, I replaced what you quoted with the last portion.

             

            Still nothing is loading. There is no progress bar and no information is loaded.

             

            Any idea on what the problem may be?

             

            Is there an action I am not taking to get the information. Some people have problems of redirecting to another .html file after the files load. My problem is that no files are loading.

             

            I have all images stored under my /images folder in my file manager.

             

            Not really understanding what the problem is.

            • 3. Re: Creating a Javascript Preloader for my HTML sites... wont work..
              Nancy OShea Adobe Community Professional & MVP

              Here is a jQuery preloader that might help you.

              http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

               

               

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              www.alt-web.com/
              www.twitter.com/altweb
              www.alt-web.blogspot.com

              • 4. Re: Creating a Javascript Preloader for my HTML sites... wont work..
                M.R.Biesheuvel Level 3

                I see an pdf and flv file in the image list, remove them.

                 

                Rewrite the code of your loading bar into one solid procedure which can be called from image loaded so you end up with three functions:

                 

                loadImage

                imageLoaded

                displayProgressBar

                 

                Maybe it's simpler not to display a progressbar but to display a text like XX loaded from XX images.

                 

                I can't possibly write all the code for you but to adjust the loading bar use the image object instead of html code....

                 

                preloadingImg = new Image();

                preloadingImg.src = "img/dot.jpg"   //whatever your preloader img is

                 

                 

                //To place your loading bar somewhere in the document:

                 

                parentElement.addChildNode(preloadingImg);   //where parentElement is the container of the preloader image ( a DIV tag or whatever)

                 

                 

                 

                 

                 

                //to adjust the width and height

                 

                preloadingImg.height = someHeight + 'px';

                preloadingImg.width = someWidth + 'px'

                 

                 

                 

                Another alternative is indeed use jQuery.