Link to home
Start Free TrialLog in
Avatar of wanda101797
wanda101797

asked on

Need help with image preload script

This puts a meter at the top, and preloads images, when the meter goes all the way across, it then loads the next page.

This works perfect with Netscape, but with IE it loads about 95% and then just stops, it will not go to the next page (the "skip this" link works)
Can you tell me what to change to make this work with IE 4 / 5 also?

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

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
      var locationAfterPreload = "st/tingles.html"  // URL of the page after preload finishes
      var lengthOfPreloadBar = 150 // 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("st/3curvs.gif","st/fan.gif","st/3hz_top.gif","st/black.gif","st/blank.gif","st/botlft.gif","st/botrt.gif","st/botrtpic.gif","st/buta.gif","st/buta2.gif","st/butback.gif","st/butback2.gif","st/butdone.gif","st/butdone2.gif","st/butgame.gif","st/butgame2.gif","st/butmisc.gif","st/butmisc2.gif","st/anicorn.gif","st/butpic.gif","st/butpic2.gif","st/butprog.gif","st/butprog2.gif","st/butsign.gif","st/butsign2.gif","st/filler.gif","st/head_bg.gif","st/headbar.gif","st/horzblu.gif","st/midbg.gif","st/midbot.gif","st/numbaz.gif","st/pichdbg.gif","st/top_rt.gif","st/toplft.gif","st/vt_blu.gif","st/wideblu.gif","st/butm.gif","st/butm2.gif","st/butp.gif","st/butp2.gif","st/butk2.gif","st/butk.gif","st/headerguest.gif")

// Do not modify anything beyond this point!
if (document.images) {
      var dots = new Array()
      dots[0] = new Image(1,1)
      dots[0].src = "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 = "blue.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[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>

</head>

<body bgcolor="#000000">
<table cellpadding=5 cellspacing=5 border=0 width=100%><tr>
<td>
<center>
<font face="Verdana" color="#81D2FE" size=-1>PRELOADING IMAGES <br>
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()
}
document.write('<a href="javascript:window.location=locationAfterPreload">SKIP THIS</a>')
// end hiding -->
</script></TD></TR><TR><TD>
<CENTER>
<IFRAME SRC="stars.html"
width="650" height="400" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" name="space"></IFRAME>
<layer SRC="stars.html"
width="650" height="400" left="50" top="85"></layer>
 </td></tr></table>

</body>


Avatar of jbirk
jbirk

Do you have this on-line somewhere that I can see?  That way I could see the error occuring, and might be able to figure it out...

Probably unrelated, but the html is a little unclean.  The center and font tags aren't closed.  There's no html and head opening tags, or html close tag...  Also, the use of center and font is deprecated.  If you're already using dynamic html, style sheets is the way to go.  Otherwise these tags are used for compatibility.

-Josh
Avatar of wanda101797

ASKER

OK, here it is http://users.ticnet.com/tingles/trans.html , it must be some part that I modified since it works where I got it from: http://www.dynamicdrive.com/dynamicindex4/preloadit.htm .
I'll close those tags, the others I just didn't include in the copy.
I don't know anything about style sheets, but I'll check into it. thanks.
I just took a look at that.  I do see that it's freezing on your code.  It'll take further examination to determine the cause (some time tonight when I get home from work).

But I did notice one wierd thing.  The percent to the left of the images.  It seems kind of pointless to have the percent listed if there's no code in place to change that.  It just stays at 0% the whole time.  Your source is the same way.

So I would suggest either removing it, or adding in the code to update it.  I can come up with some code to do that if you want, but changing data like that can be pain since it will require a layer to get Netscape to do it.  However if a form field is used, it'll be a piece of cake! Either way you want it, I can come up with something.

In the meantime, I'll check out what's going on with the IE problem...

-Josh
I agree. That sounds like a great idea,
if you did it the hard way with a layer, would it look like it does now except that the numbers would be changing along with the meter going from 0 -100%?
I'm not sure.  I'll have to play with it and see what I can do.  First I have to get my toddler to bed...  I'll work on it after that.

-Josh
I think I may have found the problem with the script on IE 5.  One of the images being preloaded isn't there: st/3hz_top.gif
Perhaps IE 5 doesn't report it as loaded if it gets a 404 file not found, whereas netscape does.  I haven't tested it yet.  I'll get back to you when I do (I have to save the rest of the images first to get it working locally).

-Josh
OK, its' verified.  The 3hz_top.gif image is what's stopping IE 5 from continuing.  If you remove it from the list it loads.  Or adding that image to the directory, assuming you intend to use it will fix the problem.

Now, for the dynamic html part.  I'll get back to you as soon as I get it working.

-Josh
I removed it from the list in trans.html online and it's still happening to me.
It was in the directory and spelled right. are you using IE5? http://users.ticnet.com/tingles/trans.html 
ASKER CERTIFIED SOLUTION
Avatar of jbirk
jbirk

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
It looks like the only difference is that you duplicated all the images.
should I try that?
you like Star Trek too :), I had to watch Stargate on Showtime tonight, it's pretty good too.
Oh, no, that's not duplication.  Just commented out the old line before removing the one image which IE didn't like.  There's also some other commented out code.  I'm trying to get Netscape to agree with me write now on writing to a layer.  I'm afraid I'm a bit rusty, and I don't have my trusty reference book with me (it's at work)...

Yeah, I'm a Star Trek fan.  I've seen Stargate as well, and liked it also.  On the subject of sci-fi, what did you think of the Matrix?

-Josh
It doesn't make any sence to me, but that worked! (duplicating all the images)
even works with Nets.
I'm adding some more points for you since you are also doing the extra thing.
OK, I thought it was just dups, I see.
I loved the Matrix, hate the way it ended, I wanted to see more.
Well, there's two more coming!  They announced it was the first part of a trilogy a while ago.  Unless they decided against it recently, that was the latest I heard.

BTW, the cause of what was stumping me was that the text was black on a black background and therefor invisible!  So I couldn't see that it was doing anything.  Anyway, I got it working for netscape, but the placement is a little hairy.  I'm working on that now.  Then I'll work on the IE version of the code.

-Josh
That's great! I never heard anything about a second one, or a trilogy.

OK, I'm not going to rush you.
I'm so glad it's finally working and I can stop staring the code trying to figure out what I did wrong.
Well, I got it working ok with Netscape.  It centers the percent, because I can't get it to accurately go anywhere else since the window may be different sizes.  If the whole document where justified left, perhaps it would look better...  Anyway, if the user changes window size while it's loading, the percent will stay put while everything else recenters...  Other than that it's working fine.  It's late now, so I'm going to go to bed.  I'll look into the IE code tomorrow.

-Josh
Oh, I forgot to mention, you can go look at the result at the same place as before:
http://aegis.mcs.kent.edu/~jbirk/Tingles/trans.html

-Josh
That's cool! It looks great.
If it matters, the user won't be able to resize the window, I have that window opening in full screen, if they have Nets, they'll be able to minimize it or close it.
If IE, there's no window border at all, the full screen even covers the task bar.
Well, you don't have to go to that length, it's not a big deal even if they resize it.  But if you're already doing that, it would help prevent it from looking wierd...

Anyway, is the current placement ok?  Or do you want to rearrange the page?  I'll work on the IE version of the code when I get back from my Dentist appointment....

Also, wondering about you're browser requirements.  The code I wrote is Netscape 4+ only, and the IE code I will write will be IE 4+.  If I do it write it should just display no percent when used on a 3.0 Netscape browser, and the progress bar won't do anything on IE 3-, and Netscape 2- (no image object).

-Josh
It was already done before I started this.

Yes, the placement is good.

I already have a warning at the begining to use a 4+ browser since the starfield applet or any of the games won't work below 4.
It's hard to believe there are still people surfin the net with win 3.1 and IE 2 or aol2 but I see it in the stats from my other web page.
good luck at the dentist.
OK, I think I have it working ok now.  It seems to add a little more space beneath the percent on IE, but it's working.  Take a look.  It's at the same place as before.

-Josh
It is Excellent! I already uploaded it, and it works perfect with both. Thank you!

The only other problem I'm having is my sound wav does not loop right with Nets, Nets puts a pause at each loop that I don't want.
I posted this question under the HTML topic area "Sound problem" if you have an answer for that one.
Interesting that you should have that problem...  I had the same problem a while ago.  No good resolution was found.  You can see my question, and responses at:
https://www.experts-exchange.com/jsp/qShow.jsp?ta=html&qid=10076594 

It's only 7 points to read it.  Maybe you will get a getter answer now though...  with the advent of newer technologies...


-Josh
So far the best suggestion I got is to download Flash,
and (I think) make a 1x1 movie w/sound looping in the movie.
It just might work.  It's worth the shot since you can do a free trial of Flash.

-Josh