Simple Image Preloading

Hello everyone,

I'am working on a script which 'popups' images as an overlay. Nothing special, nothing new - just simple stuff.
But i stuck with finding a appropriate way to preload the image.

The image object itself and the div container around stays the same way all the time (internally). It will just be shown or hidden, or repositioned by scroll or resize events.

So if someone clicks on a thumbnail, he calls a function that is fading the background, changing the url of the image object and then displays (and position) the container. Problem is - without having the picture completely loaded, positioning will fail.

Therefore I need some kind of event which will wait until the image object (after changing the url) is fully loaded and then calls the 'show' function. I've tried many different approaches, using JS internal onload Event, addEvent from MooTools Core, Asset.image from MooTools More, and so on. Nothing has really worked. So don't get me wrong, i don't want to load a bunch of images, I just want to ensure that a specific image object is loaded before it will be shown.


Thanks!

Asset.image should've worked for this kind of endeavor. though if it failed, then it might be your implementation of Asset.image itself. how did you make your Asset.image code?

I'm generating the image object like that: (this.src is the source file)


preloading: (show() should be called when the image is loaded)


changing image:


I also tried using the SAME actual object, so instead of generating and injecting the image i just injected 'myImage', without success.

show() is called, but the loading is not finished at that point.

I'm using this function for getting the size of the 'popup' by the way - in text based context it works quiet well:



Thanks.

i should have checked the "more" docs.it's like that...