Solved

Timer on a preloader

Posted on 2001-08-19
4
494 Views
Last Modified: 2008-02-01
Hi,

I have the following script which I'm using on my site to preload the homepage. I also have a nice flash
movie on the preload page to keep people interested while the homepage loads. My problem is that the
preload finishes before the movie has completely loaded and the page changes. Is there a way to add
a function to the script below which will delay the start of the preload, for maybe 20 to 30 seconds or more if necessary?

This is the program I'm currently using without a timer, but I wonder if there's a better way to do it. I asked this as a general question originally, but all I got was another question "When are u calling the 'preload_document()' method ??" to which I have no answer or I probably wouldn't be asking this question in the first place.


This is in the head section -

<script language="JavaScript">
function preload_document (next_doc)
{
    // Am I the "next document" or the "current document"?
    if (window . name == "preloader")
         // (next document)
         // Close the preloader window:
         self . close ();
    else
         // (current document)
         if (next_doc != null)
         {
              // Open a preloader window:
              window . open (next_doc, "preloader", "width=1,height=1");
              // Raise current window to the top:
              self . focus ();
         }
}
</script>

<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
*/

// You may modify the following:
var locationAfterPreload = "index1.html" // URL of the page after preload finishes
    var lengthOfPreloadBar = 250 // Length of preload bar (in pixels)
    var heightOfPreloadBar = 15 // 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
("PoolBackground.jpg","DarkOakBackground3.gif","cooleaipoolleague.gif","welcome2.gif","hand.jpg","chalk3a.jpg","pagepic1.gif","opensign.gif","master2.gif","bbanditnetscape.gif","ie5anim.gif","broadlandfm.gif","Webmusiclink3.gif","norwichlifebanner.gif","BeehiveBanner.gif","fortunebanner1.jpg","Legsportbanner4.gif","Legteesbanner2.jpg","analystbanner1.jpg","Progbanner8a.jpg","Prankbanner1.jpg","poolshot_30805.gif")

// Do not modify anything beyond this point!
if (document.images) {
    var dots = new Array()
    dots[0] = new Image(1,1)
    dots[0].src = "black1x1.jpg" // 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 = "green1x1.jpg" // 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[i] = new Image()
         preImages[i].src = yourImages[i]
    }
    for (i = 0; i < preImages.length; i++) {
         loaded[i] = false
    }
    checkLoad()
}
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)
}
// end hiding -->
</script>

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

and this is in the body section -

<center>0%

<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip
preloading
// for some reason, or his browser doesn't support JavaScript image object.
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>

100%</center><br>
0
Comment
Question by:Chasseur
  • 2
4 Comments
 
LVL 19

Expert Comment

by:webwoman
ID: 6403759
I suggest you rethink what you're doing. If the preload finishes BEFORE your Flash movie, why even use it? All you're doing it making people wait LONGER than they would if you just showed your homepage.

IMHO, Flash intros are almost always a waste of time, and trying to use them to fill in time while a main page loads just tells me your main page is too big. ;-) Or you think it's too big... but your Flash movie is obviously bigger.

If you make people wait for a Flash movie and then have to wait for that to run and then get to your main page -- a great many people won't ever get there. Especially those who don't have the right Flash plug-in, and get prompted to download and install it. You've lost them forever.
0
 
LVL 1

Accepted Solution

by:
james_beilby earned 50 total points
ID: 6404301
You should definitely consider webwoman's wise words :-) but here's the code anyway...

Replace:

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)
}

With:

var timeExpired=false;
setTimeout("timeExpired = true;",30000);

function checkLoad() {
   if (timeExpired && 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)
}

You can replace "30000" with the minimum time to wait in milliseconds. So at the moment the page won't change until 30 seconds after the user arrives.

Hope this helps,
James
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6405024
The problem is -- you don't know my connection speed, which, by the way, is completely variable and not anything you have the least bit of control over.

If I've got a really good connection, I'll sit there while until the timer is up... and if I've got a slow connection, you're right back where you started -- only worse. ;-)
0
 

Author Comment

by:Chasseur
ID: 6433040
Thanks, just what I needed. The movie is an integral part of the site and the index page isn't too large but needs the images preloaded, that's why I need it to be like this. The information given in the flash movie is important so it has to be seen. Perhaps I shouldn't have called it a preloader as such.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now