who called the onload?

@sbriouxDec 18.2006

Is there a way in JavaScript to find out which portion of your HTML called the onload event.

For example i have 7 images all can fire the onload event. But is there a way to find out which img triggered the event?

to post a comment

JavaScript

21 Comments(s) _↴

@hansschmuckerDec 18.2006 — #"this" is always mapped to the object that triggered the event, in this case your image!

@sbriouxauthorDec 18.2006 — #But then in that case would i allowed to get the image tags source by doing .. this.src?

@hansschmuckerDec 18.2006 — #Why do you need the tag source? You can read all attributes directly from the image. What do you want the tags for?

@sbriouxauthorDec 18.2006 — #basically what i'm trying to do is keep track of images at eh browser loads them.. then once all the images are loaded thatn i'll allow animation of the image for dial up users. So i have an array that contains the source and i check which image was loaded by looking at the src then storing it in an array if not already loaded.

Does that make any sence or am I thinking faster then i'm typing again.

@hansschmuckerDec 18.2006 — #A bit ?

But you can simply get the url using "this.src"

@sbriouxauthorDec 18.2006 — #Oh well i just passed this as an argument to the function then pulled the url out that way.. seems to be working. Although IE dosn't seem to fire the onload even when added in via JavaScript, however FF and Netscape do recognize it.. odd.

@hansschmuckerDec 18.2006 — #Could you give me a bigger slice of your code so I can see what's going on? I'll give you some of mine in return: The widgetPreloader (bottom) is what you want.

<i>
 </i>/* ---Element Utility Section--- */
 /*
 (DOMElement)create(tagName Type)
 (DOMElement)create(urlString imageUrl, function onLoadCallback)
 (function)makeEventListenerData(urlString imageUrl, function onLoadCallback)
 (eventListener)makeEventListenerData(function callback, variant callbackData)
 */ 
 var Element={};
 
 <i>	</i>		Element.fatalError=function(advanced){
 <i>	</i>			alert("We're terribly sorry, but there has been an error. Most likely, you're simply using an outdated browser.n Do yourself a favor and get Firefox at getfirefox.comnnError:n"+advanced);
 <i>	</i>		}
 
 <i>	</i>		Element.create=function(type){
 <i>	</i>			return document.createElement(type);
 <i>	</i>		}
 
 <i>	</i>		Element.createImage=function(url,callback){
 <i>	</i>			var imageEl=document.createElement("img");
 <i>	</i>			if(callback!=undefined) Element.addEventListener(imageEl,"load",callback,imageEl);
 <i>	</i>			if(url!=undefined) imageEl.src=url;
 <i>	</i>			return imageEl;
 <i>	</i>		}
 
 <i>	</i>		Element.getWindowInnerSize=function(){
 <i>	</i>			if(window.innerWidth!=undefined){
 <i>	</i>				return {"x":window.innerWidth,"y":window.innerHeight};
 <i>	</i>			}else if(document.body.clientWidth!=undefined){
 <i>	</i>				return {"x":document.body.clientWidth,"y":document.body.clientHeight};
 <i>	</i>			}else if(document.documentElement.clientWidth!=undefined){
 <i>	</i>				return {"x":document.documentElement.clientWidth,"y":document.documentElement.clientHeight};
 <i>	</i>			}else Element.fatalError("Can't get inner Window size.");
 <i>	</i>			return {"x":640,"y":480};
 <i>	</i>		}
 
 <i>	</i>		Element.makeEventListenerData=function(callback,data,el){
 <i>	</i>			return (function(evt){ callback(evt,data); });
 <i>	</i>		}
 
 <i>	</i>		Element.makeEventListenerDataIEModel=function(callback,data,el){
 <i>	</i>			return (function(evt){ callback.call(el,evt,data); });
 <i>	</i>		}
 
 <i>	</i>		Element.addEventListener=function(el,type,callback,data){
 <i>	</i>			if(el.addEventListener!=undefined) return el.addEventListener(type,Element.makeEventListenerData(callback,data,el),false);
 <i>	</i>			else if(el.attachEvent!=undefined) {var cb=false; el.attachEvent("on"+type,cb=Element.makeEventListenerDataIEModel(callback,data,el),false); return cb;}
 <i>	</i>			else Element.fatalError("Can't setup EventListener");
 <i>	</i>			return null;
 <i>	</i>		}
 
 <i>	</i>		Element.sizeToDocumentOnce=function(evt,data){
 <i>	</i>				data.style.width=Element.getWindowInnerSize().x+"px";
 <i>	</i>				data.style.height=Element.getWindowInnerSize().y+"px";
 <i>	</i>		}
 
 <i>	</i>		Element.sizeToDocument=function(el){
 <i>	</i>			el.style.top="0px";
 <i>	</i>			el.style.left="0px";
 <i>	</i>			el.style.position="absolute";
 
 <i>	</i>			Element.sizeToDocumentOnce(undefined,el);
 <i>	</i>			el.sizeToDocumentListener=Element.addEventListener(window,"resize",Element.sizeToDocumentOnce,el);
 <i>	</i>		}
 
 
 
 <i>	</i>		Element.appendToDocument=function(el){
 <i>	</i>			document.getElementsByTagName("body")[0].appendChild(el);
 <i>	</i>		}
 
 <i>	</i>		Element.remove=function(el){
 <i>	</i>			if(el.parentNode!=undefined)el.parentNode.removeChild(el);
 <i>	</i>		}
 
 
 <i>	</i>		Element.scaledPositionOnce=function(evt,data){
 <i>	</i>				data.el.style.left=Math.floor((Element.getWindowInnerSize().x*data.x/100 -data.el.clientWidth/2))+"px";
 <i>	</i>				data.el.style.top=Math.floor((Element.getWindowInnerSize().y*data.y/100-data.el.clientHeight/2))+"px";
 <i>	</i>		}
 
 
 <i>	</i>		Element.centerElement=function(el){
 <i>	</i>			Element.scaledPosition(el,50,50);
 <i>	</i>		}
 
 <i>	</i>		Element.scaledPosition=function(el,x,y){
 <i>	</i>			el.style.top="0px";
 <i>	</i>			el.style.left="0px";
 <i>	</i>			el.style.position="absolute";
 <i>	</i>			Element.scaledPositionOnce(undefined,{"el":el,"x":x,"y":y});
 <i>	</i>			el.scaledPositionElementListener=Element.addEventListener(window,"resize",Element.scaledPositionOnce,{"el":el,"x":x,"y":y});
 <i>	</i>		}
 
 <i>	</i>		Element.createCenteredImage=function(url){
 <i>	</i>			return Element.createImage(url,function(evt,data){
 <i>	</i>				Element.appendToDocument(data);
 <i>	</i>				Element.centerElement(data);
 <i>	</i>			});
 <i>	</i>		}
 
 /* ---Widget Section--- */
 /*	--- widgetFullScreenLayer ---
 constructor(CSScolor backgroundColor)
 destroy()
 */ 
 function widgetFullScreenLayer(color){
 this.layer=document.createElement("div");
 this.layer.style.backgroundColor=color;
 Element.sizeToDocument(this.layer);
 Element.appendToDocument(this.layer);
 }
 
 <i>	</i>		widgetFullScreenLayer.prototype.destroy=function(){
 <i>	</i>			Element.remove(this.layer);
 <i>	</i>		}
 
 /*	--- widgetProgressBar ---
 constructor(imageUrl backgroundImage, imageUrl foregroundImage,zIndex position)
 set(integer percentage)
 destroy()
 */ 
 function widgetProgressBar(url1,url2,depth){
 this.parent=Element.create("div");
 this.parent.style.zIndex=depth;
 this.layer2=Element.create("div");
 this.layer2.style.backgroundImage="url("+url2+")";
 this.layer1=document.createElement("img");
 this.loadListener=Element.addEventListener(this.layer1,"load",function(evt,data){
 data.layer2.style.position=data.layer1.style.position="absolute";
 data.layer2.style.left=data.layer1.style.left="0px";
 data.layer2.style.top=data.layer1.style.top="0px";
 
 <i>	</i>				data.parent.style.position="absolute";
 <i>	</i>				data.layer2.style.width="0px";
 <i>	</i>				data.parent.style.width=data.layer1.width+"px";
 <i>	</i>				data.layer2.style.height=data.parent.style.height=data.layer1.height+"px";
 
 <i>	</i>				data.parent.appendChild(data.layer1);
 <i>	</i>				data.parent.appendChild(data.layer2);
 <i>	</i>				Element.appendToDocument(data.parent);
 <i>	</i>				Element.centerElement(data.parent);
 
 <i>	</i>			},this);
 <i>	</i>			this.layer1.src=url1;
 
 
 <i>	</i>		}
 
 <i>	</i>		widgetProgressBar.prototype.set=function(percentage){
 <i>	</i>			if(percentage&gt;100) percentage=100;
 <i>	</i>			this.layer2.style.width=Math.round(this.layer1.clientWidth/100*percentage)+"px";
 <i>	</i>		}
 
 <i>	</i>		widgetProgressBar.prototype.destroy=function(){
 <i>	</i>			Element.remove(this.layer2);
 <i>	</i>			Element.remove(this.layer1);
 <i>	</i>			Element.remove(this.parent);
 <i>	</i>		}
 
 /*	--- widgetPreloader ---
 constructor(imageUrl backgroundImage, imageUrl foregroundImage,CSScolor backgroundColor,array UrlList,function ondone)
 */ 
 function widgetPreloader(url1,url2,color,list,ondone,timeout){
 this.background=new widgetFullScreenLayer(color);
 this.progress=new widgetProgressBar(url1,url2,999);
 this.imgs=new Array();
 this.tcount=list.length;
 this.ccount=0;
 this.forceEnd=false;
 this.ondone=ondone;
 this.done=false;
 this.end=function(data){
 if(!data.done){
 data.done=true;
 data.ondone();
 data.background.destroy();
 data.progress.destroy();
 }
 }
 
 <i>	</i>			this.checker=function(evt,data){
 <i>	</i>				if(!data.done){
 <i>	</i>					data.ccount++;
 <i>	</i>					data.progress.set(Math.floor(data.ccount/data.tcount*100));
 
 <i>	</i>					if(data.ccount&gt;=data.tcount){
 <i>	</i>						data.end(data);
 <i>	</i>					}
 <i>	</i>				}
 <i>	</i>			}
 <i>	</i>			for(var i=0;i&lt;list.length;i++){
 <i>	</i>				this.imgs[i]=document.createElement("img");
 <i>	</i>				Element.addEventListener(this.imgs[i],"load",this.checker,this);
 <i>	</i>				this.imgs[i].src=list[i];
 <i>	</i>			}
 <i>	</i>			this.timeout=window.setTimeout(Element.makeEventListenerData(function(evt,data){data.forceEnd=true;data.end(data);},this),timeout*1000);
 <i>	</i>		}

Edit, OK: you'll get the whole code.

@sbriouxauthorDec 18.2006 — #Not sure how much of this will make sense becuase it's got old code all commented out in it.

[CODE]  imageCounter: function(el) {/*{{{*/
 var clean = this.clean(this.current);
 var duration = this.options.durations.active;
 var callingImage = el.getAttribute('src');
 //    var callingImage = document.getElementById('preloadedImage').src;
 
   if (this.counter > this.products[clean]['images'][duration].length){
   this.counter = 0;
   }
   if( this.imageArray.indexOf(callingImage) == -1 ){
   this.imageArray.push(callingImage);
   this.counter ++;
   this.imageInfoText();
   }
 //    if(this.products[clean]['isPlaying'] == true) {
 //       this.counter ++;
 //       this.imageInfoText();
 //    }
 //    alert("Counter : <" + (this.counter) + "> <" + this.products[clean]['images'][duration].length + "> <" + callingImage + ">");
 return this.counter;
 },/*}}}*/
 [/CODE]

@hansschmuckerDec 18.2006 — #how do you set up the event listener, that's the juicy part ?

@sbriouxauthorDec 18.2006 — #ah right sorry.. here that part is.

[CODE]
  animateOnce: function(){/*{{{*/
 //    alert(this.products[clean]['images'][duration][i].src);
 var clean = this.clean(this.current);
 var duration = this.options.durations.active;
 var period = this.getPeriod();
 this.products[clean]['isPlaying'] = true;
 
   newDiv = document.createElement("div");
   newDiv.setAttribute('id','hidden-Preloaded-Images');
   newImgArray = [];
   for(i = 0; i < this.products[clean]['images'][duration].length; i++){
   newImgArray[i] = document.createElement("img");
   newImgArray[i].setAttribute('onload','animator.imageCounter(this);');
   newImgArray[i].setAttribute('id','preloadedImage')
   newImgArray[i].src = this.products[clean]['images'][duration][i].src;
   newDiv.appendChild(newImgArray[i]);
   }
   animationImage = document.getElementById(this.options.ids.imageWrapper);
   animationImage.appendChild(newDiv);
 /* for(i = 0; i < this.products[clean]['images'][duration].length; i++){
 if (this.products[clean]['timer']) window.clearTimeout(this.products[clean]['timer']);
 this.next();
 if (this.isLastFrame()) period = this.getPeriod() * 4;
 this.products[clean]['timer'] = window.setTimeout(this.animate.bind(this),period);
 }
 */
 var animateInterval = window.setInterval( function(){
 if ((this.counter) == this.products[clean]['images'][duration].length){
 this.animate();
 clearInterval(animateInterval);
 }
 }.bind(this),300);
 
 },/*}}}*/
 [/CODE]

@hansschmuckerDec 18.2006 — #There's the problem: onload

newImgArray[i].setAttribute('onload','animator.imageCounter(this);');

it should be "animator.imageCounter()" and you should expect an event as parameter

"imageCounter: function(evt)"

or even better: newImgArray[i].onload=this.imageCounter;

Then imageCounter will get executed in the correct scope (i.e. the HTML element)

@sbriouxauthorDec 18.2006 — #It's working the way it's posted in everything except any version of IE.

the newImgArray[i].onload = this.imageCounter; dosn't work.

Seems when I create the onload with JS to avoid HTML validation failure it dosn't work in IE however if i have the php output that code it works.

@hansschmuckerDec 18.2006 — #Try this function:

<i>
 </i>function methodize(methodize_func,methodize_scope){
 var methodize_args=new Array();
 for(var i=2;i&lt;arguments.length;i++) methodize_args.push(arguments[i]);
 return (function(evt){methodize_func.call(methodize_scope,evt,methodize_args);});
 }
 
 newImgArray[i].onload=methodize(this.imageCounter,this,newImgArray[i]);

and change the beginning of imageCounter to

<i>
 </i>imageCounter: function(evt,args) {
 var el=args[0];

@sbriouxauthorDec 18.2006 — #Nice that fixed it up for IE but what exactly is that methodize function doing?

@hansschmuckerDec 18.2006 — #That's a bit complicated... basically it returns a function that when run executes the function given in the first parameter in the scopy of the second parameter, other parameters get passed on to the target function as an array.

http://www.tapper-ware.net/ for more details

@sbriouxauthorDec 18.2006 — #Did you write this or someone else?

@hansschmuckerDec 18.2006 — #Me

@sbriouxauthorDec 18.2006 — #I havn't read all of that article yet.. however do you know of any good sites for how to create you own event in JavaScript?

@hansschmuckerDec 18.2006 — #Google has some information about it on one of the blogs, but emitting events is nothing I've done so far, so I know it's possible, but that's about it.

@sbriouxauthorJan 18.2007 — #Okay i'm having the same issue again and I don't understand why. I have implemented the same code just with a different img tag and a different function.

Here is the setup

[CODE]
 var overlayImages = document.getElementById('overlayLayer');
 overlayImages.onload = this.methodize(this.countOverlays, this, overlayImages);
 [/CODE]

The even never fires in IE, Safari or Opera but works in FF and Netscape.

Did I forget something that I just can't see?

@sbriouxauthorJan 19.2007 — #Anyone? please?

Also in #JavaScript _↴

Loading cropped image into a variable Cannot doPostBack after MIME attachment download Simple APR calculator

Success!

Help @sbrioux spread the word by sharing this article on Twitter...

Tweet This

who called the onload?

21 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

who called the onload?

21 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

21 Comments(s) _↴

Also in #JavaScript _↴