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 :
Ext.define('CRIapp.view.ImgRecette', {
    extend: 'Ext.Container',
    xtype: 'imgRecette',    
    config: {
        width: 845,
        height: 475, 
        style: 'background-color: transparent;',
    *  Function Declaration        *
    initSlide: function(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 :
for(var i=0; i<500; i++)
    var img = new CRIapp.view.ImgRecette();
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