Thanks all for reply and links.

On Jan 22, 5:52 pm, jgornick <jgorn...@gmail.com> wrote:
> 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