Tricks: How to...
Image effects:
› Preload images
› Preload images 2
› Swap images
› Swap images 2
› View larger image
› Image transparency
› Image slideshow
Special effects:
› Border
› Border 2
› Watermark
› Scroller
› Scroller 2
› Link hover color
› Custom cursor
› Snowing
› Auto window resizer
› Link tips
› Popup
Buttons & menus:
› Back button
› Java buttons
› Flat buttons
› Slide menu
› Drop down menu
› Alphabet menu
Mouse effects:
› Elastic mouse
› Mouse snake
› Mouse stars
› Mouse orbit
› Mouse eyes
Text generators:
› Infobox
› Quote generator
› Fading messages
› Text fader
› Text glow
› Credits

home > real world > web resource > web source codes >

Because I wanted this page to stay in the same location and not be redirected, I used locationAfterPreload="#" instead of locationAfterPreload="your_next_page.html". To automatically redirect, use your_next_page.html for the next destination.

STEP 1/2: Put this code into the <HEAD> of your document:

<head>
<script language="JavaScript1.1">
<!-- begin hiding
  var locationAfterPreload = "#"
  var lengthOfPreloadBar = 350
  var heightOfPreloadBar = 15
  var yourImages = new Array("gel01.gif", "gel02.gif", "gel03.gif", "gel04.gif", "gel05.gif", "gel06.gif", "gel07.gif", "gel08.gif", "gel09.gif", "gel10.gif", "black.gif", "green.gif")

if (document.images) {
  var dots = new Array()
  dots[0] = new Image(1,1)
  dots[0].src = "black.gif"
  dots[1] = new Image(1,1)
  dots[1].src = "green.gif"
  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>

STEP 2/2: Put this table into the <BODY> of your document:

<body>

<TABLE align=center valign=middle border=0 width=400 height=100%>
<TR><TD align=center valign=middle>

<P>Please allow few seconds for the preload process.<BR>

<script language="JavaScript1.1">
<!-- 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>

<BR><B>..:: l o a d i n g ::..</B><BR>

<script language="JavaScript1.1">
<!-- begin hiding
document.write('<a href="javascript:window.location=locationAfterPreload"><B>..:: skip preloading ::..</B></a>')
// end hiding -->
</script>

</TD></TR>
</TABLE>
</BODY>