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