1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Montreal
    Posts
    48
    Vote Rating
    0
    JFFortierQc is on a distinguished road

      0  

    Default Unanswered: Html images load even if the Component is not added to the screen - Problem

    Unanswered: Html images load even if the Component is not added to the screen - Problem


    Hi
    I created a Carousel from scratch. So I manage completely my items. There is many reasons, but for now, this is not the problem.

    We can add over 500 items to the carousel Class. The Carousel manage items so it adds the visible one the screen only to prevent a memory leak. Other items are not set to the HTML. So, each item is a separated Class that is a Container of Sencha. This way, it can be whatever inside.

    My problem is that, even if the 500 items (Container) are not added to the HTML inside the Carousel, they exist in JavaScript and all their images loads. Big problem, because user may not want to view all items, but will load all items image and it takes bandwidth and memory.

    Here is the item code :
    Code:
    Ext.define('CRIapp.view.ImgRecette', {
        extend: 'Ext.Container',
        xtype: 'imgRecette',    
        config: {
            width: 845,
            height: 475, 
            style: 'background-color: transparent;',
            items:[]
        },
        
        
        
        /*------------------------------*
        *  Function Declaration        *
        *------------------------------*/
        
        initSlide: function(id)
        {
            this.add(this.createLockScreen(id));
        },
        
            
        
        createLockScreen: function(id)
        {
            return {html: '<div style="width: 845px; height:475px;"><img class="lock" src="images/images' + id + '.jpg" width="845" height="475" /></div>'};
        }
    });
    Note that this Item add the image into itself, yes, but the item itself is not added to the Carousel. We only create it in a for loop like that :
    Code:
    for(var i=0; i<500; i++)
    {
        var img = new CRIapp.view.ImgRecette();
        img.initSlide(i);
    }
    Any idea why all 500 HTML images load even if the ImgRecette Class is just called, but not added to the HTML itself?
    Any solution?

    Thanks in advanced

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    580
    Answers
    34
    Vote Rating
    32
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    Did you try Ext.Img for the images?

Thread Participants: 1

Tags for this Thread