MooTools Image Preloading with Progress Bar

Haha, this girl are great, :)
Good tip David.

david walsh, as you can see on this screenshot, using ie7 the pics are enlarged. pd. maybe is a mootools problem?

http://img247.imageshack.us/img247/1838/oo956e2tmpll4.jpg

Didn’t I request an ass shot? HA.

I’ve seen image preloading done before with only two images. The stripped bar would be a small repeatable image and then there would be a solid bar. (I guess it can be done with one.) Then the two divs would be right next to each and then one would grow and the other would shrink. Until the solid one would have a width of 0.

It’d be cool to have the progress bar discreetly disappear when it reached 100%.

But… how do you preload the preload images?

It was a joke… but… what if the preload images are not loaded (for some unknown reason), does it still look ok without them?

Hey Dave,
is there a convenient way to inject the values of the array

var images()

vith Ajax?

Cheers Dan

That’s an awesome usage of mootools ^^
I had a problem with website preloader because I have tons of images as css backgrounds but Firefox 2 run body.onload event without downloading those… And now not only I can fix it, but have it with percentage bar :3

Big thanks for help ^^

david, great use of mootools and love your blog. I’ve played with your example, and I’ve noticed that onComplete doesn’t work properly in firefox. The preloaded image seems to load twice in FF, however it successful in IE/Opera/Chrome/Safari. Have you come across this issue before? Would love to hear a workaround if possible! TIA!

Very cool David!

Is it possible to hide the progress bar after the images are fully loaded? How can this be done?

Thank you very much for your fast reply. This was my first idea to use this function. I tried to do this with fx.slide from mootools demo page, but had no luck until yet to get it to work.

var myFx = new Fx.Slide(‘images-holder’, {
duration: ‘long’,
transition: Fx.Transitions.Bounce.easeOut

});

onComplete: function() {
images.each(function(im) {
new Element(‘img’,{ src:im, width:200, style:’width:200px;margin:20px 20px 20px 0;’ }).inject($(‘images-holder’));
});
fx.hide();
}

How can i hide the progress bar after loading the images?

I have some Java on my site and I really wanted to use this MooTool example to pre-load the heavy .jar files, I just got this working with image files but its the Jars that hold everything up for me, leaving a big blank space on my site.

How can I modify this code to pre-load .jar files, right now I have just pointed to the files. Sorry, not a programmer at all this end, thanks.

/* preloading */
var images = ['http://meta.projectmio.com/code/bubble_4.jar', 'http://meta.projectmio.com/code/core.jar'];
var loader = new Asset.images(images, {
onProgress: function(counter,index) {
progressBar.set((counter + 1) * (100 / images.length));
},

});
});

</script>

I have some Java on my site and I really wanted to use this MooTool example to pre-load the heavy .jar files, I just got this working with image files but its the Jars that hold everything up for me, leaving a big blank space on my site.

How can I modify this code to pre-load .jar files, right now I have just pointed to the files. Sorry, not a programmer at all this end, thanks.

/* preloading */
var images = ['http://meta.projectmio.com/code/bubble_4.jar', 'http://meta.projectmio.com/code/core.jar'];
var loader = new Asset.images(images, {
onProgress: function(counter,index) {
progressBar.set((counter + 1) * (100 / images.length));
},
});
});

Hi, how can I adapt this code to pre-load files as well as images? My website has large Java applet on its as the main feature and it take time to load, without it there is a big blank area, trying to preload the .jar files with your code doesn’t work. I would really like to be able to use your code for this, thanks.

Hi,

Would it possible to use it as a preloader for other objects (like swf) , and how?

Thanks in advance.

Is there a way to retrieve images addresses (url) already placed into a div, ask mootools not to load them the usual way, store them into an array and then, use your code?

Thanks

what if you want to show the preloader for each image, when loaded that one, show preloader for the next and so on

hi there David -

this is really great.

I’m having one issue and I wonder if you’ve run into it before and/or have any advice. in Firefox and Safari, all is wonderful. In Windows IE 6, my code is never hitting the onComplete block – it stops at 96%.

I added an alert to the onProgress block that prints this debug info out:

“finished ” + index + ” out of ” + images.length + ” images”

in Firefox, images.length is 26, but in IE 6, images.length is 27, so this may be causing the problem.

this seems like more of a problem with Asset.images than dwProgressBar, but I’d be surprised if I were the only person seeing this behavior.

have you seen or heard anything about this? your advice is appreciated!

well, I fixed my own problem:

http://jszen.blogspot.com/2004/07/array-length-headaches.html

I had an extra comma following the last image in my image array.

thanks anyway! :)

hey could u plz tell me how to show some text with that 100% i mean that variable goes from 0 to 100 % so i want to display this text with it “loading images” of course without quotes.

Hi, david, one question,, if i want use this script for load data from database mysql usign php, and show Preloader while load data ? How do this.

How can i remove the progress bar after it load the images?