1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    9
    Vote Rating
    0
    EdPS is on a distinguished road

      0  

    Default Load event on an image element

    Load event on an image element


    I have the following html in a container, and I want add listeners to the load event of the images, because they are dynamically changed during runtime.

    Code:
    html: [
    		'<div id="img-xtr">',
    			'<img id="img1"></img>',
    			'<img id="img2"></img>',
    		'</div>'	
    		].join(''),
    I have tried to use Ext.get(id) to get the elements and then add the listeners with the 'on' method. However the Ext.Element doesn't seem to have a 'load' event and the event is never triggered.

    How could I listen to the load event?

    Thanks

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Ext.Img has a load method if you can use that as an item. Otherwise the <img> has a load event that you can listen to, here is an example:

    Code:
    new Ext.Container({
        fullscreen : true,
        html       : '<img src="http://ww1.prweb.com/prfiles/2011/10/24/8954551/Sencha.io%20logo.png">',
        listeners  : {
            painted : function(comp) {
                var el  = comp.element,
                    img = el.down('img');
    
                img.dom.addEventListener('load', function() {
                    console.log('load');
                });
            }
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    9
    Vote Rating
    0
    EdPS is on a distinguished road

      0  

    Default


    Thanks Mitchell. Actually I tried using the Ext.Img and the load event works, but it seems that Ext.Img requires to specify the size of the image in the config parameter because otherwise it won't display the image, and I don't know the size in advance. I don't know what is the expected behavior but the dimensions parameters don't behave in the same way as in the <img> element.

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    71
    Vote Rating
    5
    mihaipocorschi is on a distinguished road

      0  

    Default


    @mitchellsimoens ...your code works only on the first img. Using .query() return html objects not ext.element. Clues?

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    71
    Vote Rating
    5
    mihaipocorschi is on a distinguished road

      0  

    Default


    i tried
    Code:
    el.select('img').each(function(el,c){
        Ext.get(el.dom).addListener('load', function()
                {
                    console.log('loaded');
                })
            });
    it doesnt work. it works for other events like tap/mouseover etc. Maybe it's not load?

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Instead of this:

    Code:
    new Ext.Container({
        fullscreen : true,
        html       : '<img src="http://ww1.prweb.com/prfiles/2011/10/24/8954551/Sencha.io%20logo.png">',
        listeners  : {
            painted : function(comp) {
                var el  = comp.element,
                    img = el.down('img');
    
                img.dom.addEventListener('load', function() {
                    console.log('load');
                });
            }
        }
    });
    I would do:

    Code:
    new Ext.Container({
        fullscreen : true,
        html       : '<img src="http://ww1.prweb.com/prfiles/2011/10/24/8954551/Sencha.io%20logo.png">',
        listeners  : {
            element : 'element',
            delegate : 'img',
            load : function() {
                //
            }
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.