Here's a class I created to know when all images in the body or a
specific div are loaded: http://gist.github.com/50602

Hope this helps!

 - Joe

On Jan 21, 9:48 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi,
>
> > But somehow, in
> > Safari, when I try to get the width/height of an image after a onload,
> > I get nuthing.
>
> It would be more useful to post the failing code than your involved
> workaround (particularly one you say is outdated).  With apologies,
> it's much more likely that there's an error in your code than that
> onload doesn't work in Safari.  For instance, have you dealt with the
> race condition?  (Unless you're careful, the image load operation will
> be in a race with your code hooking up the onload handler.)
>
> This works fine in Safari for Windows 3.1.2, IE6, IE7, FF3.0.5, and
> Opera 9:
>
> Adding the image:
> * * * *
>     var img;
>
>     img = new Element('img');
>     img.id = 'theimage';
>     img.observe('load', showWidthHeight);
>     document.body.appendChild(img);
>     img.src = 'http://prototypejs.org/images/logo-home.gif';
> * * * *
>
> Note that I ensure I'm watching the event before even setting the src
> attribute, to avoid the race condition.  I'm not saying this is the
> best way to do this. :-)
>
> The showWidthHeight function:
> * * * *
> function showWidthHeight(evt)
> {
>     var img;
>
>     img = evt.findElement();
>     alert('' + img.width + ',' + img.height);}
>
> * * * *
>
> I'd have to do some research to check that .width and .height were
> really a reliable cross-browser, cross-platform way to get the info,
> but the point is that this demonstrates that img.onload works in the
> browsers mentioned...  (And that said, all of the browsers mentioned
> also returned the correct info for the .width and .height properties,
> so maybe that _is_ a reliable means of getting it.)
>
> HTH,
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
> On Jan 21, 3:04 pm, Yozefff <yoze...@gmail.com> wrote:
>
> > 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