Zion,

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

>
>
> On Tue, Sep 15, 2009 at 12:10 PM, zion <zzzzzz...@gmail.com> wrote:
>
> Hi,
>
> I have couple of really big images in my site that load slow and
> decreases the user experience, so is there a way to load the few
> images with prototype & scriptaculous so that it would display
> somesort of a loading image/page until these few big images are
> loaded.. it is important that this would apply only for the few
> selected images..Just cant figure out how to do it.. many thanks.
>
>
>
> >


--~--~---------~--~----~------------~-------~--~----~
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-scriptaculous@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