PDA

View Full Version : Image Preloader addon to show status



Rockonmetal
01-27-2007, 09:51 PM
Hey whats up people. I know this is a Javascript Image Preloader...
Now heres what I want.
Ok right now its just a bar that loads up and when finished it goes the next page. Not a problem. I just thought it would be nice if it could show the status. Like: Loading 16.jpg or 30% loaded, 40% loaded.
Here is the code:
<!-- this goes in the head -->
<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 = "1.html" // URL of the page after preload finishes
var lengthOfPreloadBar = 600 // 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("black.gif","blue.gif","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg")

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

Thank you for viewing. Good Luck

mburt
01-27-2007, 10:29 PM
The "status" would infact, be quite complex considering you'd probably have to use AJAX and that you're loading different images. I've seen ways to do it with pages loading, but I'm not sure about the images. Try googling it "AJAX Load Status" or something.
Sorry I'm not much help, but this wouldn't exactly be an easy task.

Twey
01-28-2007, 12:20 AM
Like: Loading 16.jpgThe way Javascript works, the script has no idea what's being loaded at any given moment: all it knows is when the loading of a given image finishes, so that one's out. The percentage one is a much better idea, though. This script is in serious need of a rewrite. So far I've got this (http://www.twey.co.uk/includes/ImagePreloader.js). Sample usage:
<script type="text/javascript" src="ImagePreloader.js"></script>
</head>
<body>
<script type="text/javascript">
var ip = new ImagePreloader(
"http://www.twey.co.uk/images/beryl-blue-1.png",
"http://www.twey.co.uk/images/beryl-blue-2.png",
"http://www.twey.co.uk/images/beryl-red-1.png",
"http://www.twey.co.uk/images/beryl-green-1.png",
"http://www.twey.co.uk/images/beryl-green-2.png"
);

ip.setImageCallback(ImagePreloader.TOTAL_CALLBACK);
ip.setFinishedCallback(
function() {
window.location.replace("newpage.html");
}
);

ip.go();
</script>If you can figure it out from that and the source, great (it's pretty self-explanatory); if not, I'll do a proper write-up for it tomorrow, when I'm not feeling so tired and ill. Remember to post back to this topic, though, or I'll forget.

work-ed
02-21-2007, 02:44 AM
Here's how I applied the above code and it did not work for me... am I missing something? I really want to be able to utilize this preloader, sounds really interesting. Any help is appreciated!



<!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=ISO-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="ImagePreloader.js"></script>

</head>
<body>
<script type="text/javascript">
var ip = new ImagePreloader(
"http://www.work-ed.com/page_preloader/image1.jpg",
"http://www.work-ed.com/page_preloader/image2.jpg",
"http://www.work-ed.com/page_preloader/image3.jpg",
"http://www.work-ed.com/page_preloader/image4.jpg",
);

ip.setImageCallback(ImagePreloader.TOTAL_CALLBACK);
ip.setFinishedCallback(
function() {
window.location.replace("newpage.html");
}
);

ip.go();
</script>

<table>
<tr>
<td>
<img src="image1.jpg" />
</td>
<td>
<img src="image2.jpg" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" />
</td>
<td>
<img src="image4.jpg" />
</td>
</tr>
</table>

</body>
</html>

Twey
02-21-2007, 04:37 AM
You have an extra comma after the fourth image, which shouldn't be there.