Skip to content

prototypes in javascript for image onload handlers

All this was trying to get it so all subsequent images created in a document would have a onload handler already setup (yes you guessed it I was trying to spy on a metrics library).

This works:
var t = new Image();
t.onload = function(){alert('yes')};
t.src="http://www.cisco.com/web/fw/i/logo.gif";

does not work
Image.prototype.onload = function(){alert('yes')};
var t = new Image();
t.src="http://www.cisco.com/web/fw/i/logo.gif";

this works in that you get a method called onload on resulting image objects.
It does not work in that you have to cal the method in order for it to fire…

document.images[0].constructor.prototype.onload = function(){alert('yes')};
var t = new Image();
t.src="http://www.cisco.com/web/fw/i/logo.gif";

conclusion: onload != load handler

A coworker was headed into constructor override land:
var imgc = Image.prototype.constructor;
Image = function () {
imgc.apply (this, arguments);
console.log ('ccc', this, this instanceof Image);
var self = this;
setTimeout (function () {
this.addEventListener ("load", function () {
alert ('yes');
}, false);
}, 10);
};


this is why you need the settimeout:

var imgc = Image.prototype.constructor;
Image = function () {
imgc.apply (this, arguments);
console.log ('ccc', this, this instanceof Image);
var self = this;

this.addEventListener ("load", function () {
alert ('yes');
}, false);

};

bio notes

(notes on) biology from ornana films on Vimeo.

nifty chain

links

lunches, figments, old stars and remodels

ie6 memories

http://mrdoob.com/lab/javascript/effects/ie6/

logorama

Logorama from Marc Altshuler – Human Music on Vimeo.

js1k contest entry

Here’s my entry into the 1k contest:

http://js1k.com/demo/754

It made me really appreciate the other entries (most of which are much more complex than mine).

Compression-by-hand is a fine art, which I’ve probably had enough of for a while now.

Here’s the code on github:

http://github.com/facetcounter/bubble1k.js

Here’s a bookmarklet so you can destroy any page!

giant bubbles

recipe for giant bubbles