Hi there, 
IMHO, Ajax wouldn't help as the real timing issue is around the image load 
which I don't think is predictable.

So, why don't you use a image preload mechanism such as the one I use in a 
slightly different way. I display a waiting message, preload the pic and then 
hide the waiting message thus revealing the full image.

I think the following code should help you, I found it sometime ago it   
is based on this page : 
http://www.webreference.com/programming/javascript/gr/column3/ 
Basically, you need to have 
        - an array with url's for your big images such as picSrc[0] = 'images/ 
big1.jpg'; picSrc[1] = 'images/big3.jpg' 
        - a hidden <div id="waitingPic"> in your page which displays your   
waiting message 

When you want to load your big images you call these two lines: 

$('waitingPic').show() 
initPics() 

Here's the code 

function initPics(){ 
        var ImagePreLoader = Class.create({ 
                callback: null, 
                imageCache: new Array, 
                loaded: 0, 
                processed: 0, 
                noOfImages: 0, 
                initialize: function(images, options) { 
                        if (options) { 
                                if (options.callback) this.callback = 
options.callback; 
                        } 

                        this.noOfImages = images.length; 
                        for ( var i = 0; i < images.length; i++ ) 
                      this.preload(images[i]);   
                }, 
                preload: function(imgSrc) { 
                        var image = new Image; 
                        this.imageCache.push(image); 
                        Event.observe(image, 'load', 
this.onload.bindAsEventListener(this),   
false); 
                        Event.observe(image, 'error', 
this.onerror.bindAsEventListener 
(this), false); 
                        Event.observe(image, 'abort', 
this.onabort.bindAsEventListener 
(this), false); 
                        image.preloader = this; 
                        image.loaded = false; 
                        image.src = imgSrc; 
                }, 
                onComplete: function() { 
                        this.processed++; 
                        if (this.processed==this.noOfImages) { 
                                this.callback(this.imageCache, this.loaded); 
                        } 
                }, 
                onload: function(e) { 
                        this.loaded++; 
                        this.onComplete(); 
                }, 
                onerror: function(e) { 
                        this.onComplete(); 
                }, 
                onabort: function(e) { 
                        this.onComplete(); 
                } 
        }); 

        var imgPreloadCallback = function(imageCache, loaded) { 
            // where: 
            //     imageCache is an array of the loaded images 
            //     loaded is an int of the number of images that loaded. 
            //doSomethingAfterImagesAreLoaded(); 
                $('waitingPic').hide(); 
                picsPreLoaded = true; 
        } 

        var imgLoader = new ImagePreLoader(picSrc, 
{callback:imgPreloadCallback}); 


} 

Hope this helps. 
Christophe 

Le 3 déc. 2009 à 17:34, Peter De Berdt a écrit :

> 
> On 02 Dec 2009, at 15:25, fma wrote:
> 
>> But it does not work. In the _show() method, the call to
>> this._flashNavButtons() leads to an error (this._flashNavButtons() is
>> not a function). I think I understand why: when called from the
>> timeout mecanism, 'this' no longer exists, or does not point anymore
>> on my object...
>> 
>> Is there a way to pass 'this' in the timeout callback? I also use such
>> timeout callback to make the navgation buttons blink 3 times when the
>> photo is opened in full size...
> 
> Instead of relying on setTimeout, you would be better off just rewriting the 
> whole thing in a more Prototype way and using Ajax to fetch the image, then 
> use the callback to display the fullscreen version.
> 
> Now if you still just want to get the setTimeout working, you probably could 
> just use:
> 
> setTimeout(function() {this._show}.bind(this),300);
> 
> 
> 
> Best regards
> 
> Peter De Berdt
> 
> 
> --
> 
> You received this message because you are subscribed to the Google Groups 
> "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to 
> prototype-scriptaculous+unsubscr...@googlegroups.com.
> For more options, visit this group at 
> http://groups.google.com/group/prototype-scriptaculous?hl=en.

--

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.


Reply via email to