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" <[email protected]> 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 <[email protected]> wrote: > > > On Jan 21, 2:10 pm, Pete Brown <[email protected]> wrote: > > > > Try defining an onload event for the image that does what you need > > > > On Jan 21, 7:43 am, Stucture_Ulf <[email protected]> > > > 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 [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
