Results 1 to 6 of 6

Thread: Load event on an image element

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    9
    Vote Rating
    0
      0  

    Default 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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,029
    Vote Rating
    1368
      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 @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    9
    Vote Rating
    0
      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
      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
      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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,029
    Vote Rating
    1368
      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 @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •