Image loading spinner

[abheek]

I have a list with a bunch of images, and I'm trying to get them to have a loading spinner until the browser loads them off the network (or off the cache, whatever the case might be).

Here's what i'm trying to do:

In the template, i have assigned each <img> a class of "loading-spinner".

Then, in Ext.setup(), I'm doing:


Ext.getBody().on("load", function(ev) {
var target = Ext.get(ev.getTarget());
target.removeCls("loading-spinner");
}, this, {
delegate: ".loading-spinner",
}
);

However, the event callbacks dont seem to get called. I tried disabling caching with incognito mode, but that doesnt seem to do the trick either.

Any ideas on what can make this work?