jQuery can't use length and each

Question

I'm trying to count the number of img but it didn't works .. I tried to count div too, but it didn't works too .. It always returns 0

progressBar = {
countElmt: 0,
loadedElmt: 0,

init: function () {
 console.log('init dedans 1');

    var that = this;
    this.countElmt = $('img').length;

    // Construction et ajout progress bar
    var $progressBarContainer = $('<div/>').attr('id', 'progress-bar-container');
    $progressBarContainer.append($('<div/>').attr('id', 'progress-bar'));
    $progressBarContainer.appendTo($('body'));


    // Ajout container d'éléments
    var $container = $('<div/>').attr('id', 'progress-bar-elements');
    $container.appendTo($('body'));

    // Parcours des éléments à prendre en compte pour le chargement
    $('img').each(function () {
        console.log('each ok');
        $('<img/>') .attr('src', $(this).attr('src'))
          .on('load error', function () {
            that.loadedElmt++;
            that.updateProgressBar();
        })
            .appendTo($container);
    });

    console.log('fin each, nombre d images = ' + progressBar.countElmt);
},

updateProgressBar: function () {
    $('#progress-bar').stop().animate({
        'width': (progressBar.loadedElmt / progressBar.countElmt) * 100 + '%'
    });
}
};

 console.log('init avant');
progressBar.init(); 

Someone can tell me where the problem can come from ?

Answer 1

$(document).ready(function () {
    progressBar.init();
});