lazy load images loads the all images on page

I'm using bttrlazyloading plugin to lazy load all my images on my page. I have a list with divs and inside each div there is an image.

My content is dynamic and using template (html) i clone the div depending on how much elements i need.

this is my code:

    $.each ( THIS.get('content').topics, function(i, topic){
                $('.topic_list').append($('#topic_item').clone(true).attr('id','topic_item'+i));
                $('#topic_item'+i).find('.topic_image').attr('id', 'topic_image_'+i);
                $('#topic_image_'+i).attr('data-bttrlazyloading-xs-src', topic.icons.high_res_icon_180x180);
                $('#topic_image_'+i).attr('data-bttrlazyloading-sm-src', topic.icons.high_res_icon_180x180);
                $('#topic_image_'+i).attr('data-bttrlazyloading-md-src', topic.icons.high_res_icon_360x360);
                $('#topic_image_'+i).attr('data-bttrlazyloading-lg-src', topic.icons.high_res_icon_360x360);
});

when i finish to build my page i'm callin the plugin:

$('.topic_image').bttrlazyloading({
            backgroundcolor: 'transparent',
            animation: 'fadeInUp',
            event: 'scroll'
        })

The images are not shown until i scroll to them, my problem is that the icons are all loaded at once even when you still can not see them.

I can see that on the network.

How can i fix that?