Image load

[slemmon]

Any chance that 4.1's Image component might have a load event that fires when the image is loaded on the page?

The images layout awkwardly when the size of the image isn't set in the component's config. Below is how I'm acting on the load event currently which works, but wondered if we might see a load or elementload or some such event in Image.

Ext.define('myimage', {
    extend: 'Ext.Img' 
    , alias: ['widget.myimage'] 
    , initComponent: function () {
        this.callParent();
        this.addEvents('imageload');
    } 
    , afterRender: function () { 
        var me = this; 
        this.callParent(arguments);
        this.mon(this.el, {
           'load' : me.onImgLoad, 
            scope : me
        });
    } 
    
    , onImgLoad: function () { 
        var me = this            , 
            ct = me.ownerCt; 
        me.fireEvent('imageload', me); 
        if (ct) { 
            ct.doLayout(); 
        } 
    }
});

[Animal]

Yes, it's surprising that it does not have an Observable loaded event.

However, to add listeners to elements of a Component, use the element option of the listeners config:

new Ext.Img({
    src: 'http://www.btinternet.com/~the_bagbournes/images/puymorens.jpg',
    listeners: {
        load: {
            fn: function() {
                alert('Loaded!');
            },
            element: 'el'
        }
    },
    renderTo: document.body
});

[slemmon]

Thx for the reply.

Would it be best if I open a feature request for the loaded event on the Image Component?

Also, for my own edification, if I add the listener via 'el' is it now managed so that it's destroyed when the component is destroyed?

Thx again.

[Animal]

Element listeners are removed when an element is removed from the DOM

[slemmon]

Splendid. Thx for the tip.

[skirtle]

For what it's worth, my own experience of load events on images is that they didn't used to be reliably supported across all browsers, especially when accessing a file over the file system. I recall having to simulate it by detecting the img tag's dimensions (for an HTML img tag with no width or height set it would be 0x0 until the image was loaded, then it would auto-size). May not be relevant to your use case but it's something that might have to be considered were this to be added to the framework.