On Jan 21, 2:10 pm, Pete Brown <thenattyli...@gmail.com> wrote:
> Try defining an onload event for the image that does what you need
>
> On Jan 21, 7:43 am, Stucture_Ulf <maximilian.moulet...@gmail.com>
> wrote:
>
> > Hello!
>
> > How do I check/read when an image is loaded ?. What I want to do is
> > that I want to wait to displaya div until the entire image is loaded.
> > Now, the div get's displayed as the code structure is loaded. Grateful
> > for tips.

onload doesn't cut it in Safari(only tested Safari for Windows) ...
I've tried that ...  What I did ... I created a class  once .. sort of
a image que loader.

I've tried searching for an event in the Javascript Image event
(something like onComplete ?) but only found onLoad. But somehow, in
Safari, when I try to get the width/height of an image after a onload,
I get nuthing.



var ImageQue=Class.create({
        numItems:0,
        clearedItems:0,
        items:Array(),
        interval:null,

        initialize:function(){
        },

        add:function(image){
                if(typeof(image)!="undefined"){
                        this.items.push(image);
                }
        },

        start:function(){
                this.numItems=this.items.length;
                this.clearedItems=this.numItems;

                if(this.numItems>0)
                {
                        this.interval=new 
PeriodicalExecuter(this.checkImages.bind(this),
0.5);
                } else {
                        this.onComplete();
                }
        },

        checkImages:function(){

                var notCleared=new Array();

                for(var i=0;i<this.numItems;i++){
                        var el=this.items[i];
                        if(!el.complete) notCleared.push(el);
                }

                this.items=notCleared;

                if(this.items.length<=0){
                        this.interval.stop();
                        this.onComplete();
                }
        },


        onComplete:function(){
                // dummy function. Use this function in your own class to bind 
to
        }
});


so .. now I can do this

var myque=new ImageQue();
myque.add("test.jpg");
myque.add("test1.jpg");

myque.onComplete=function(){ alert("whoohoo"); }


oh btw .. this class is an older version ... it's just to give you an
idea ;-)

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