Estou tentando criar o preloader, mas quando executo isso, o console exibe isto:

Carregado[objeto HTMLImageElement] de 5

desta linha de código

console.log('Loaded ' + images[i] + ' of ' + images.length);

Mas o ideal é que eu exiba:

"Carregado 1 de 5"

Como posso consertar isso? Eu só quero criar isso como um retorno de chamada, então eu sei quando todas as imagens em um determinado painel foi carregado.

$(panel).each(function(){

    // Find Panel
        var panelId = $(this).attr('id');
        console.log('Loading ' + panelId);  

    // Find Images
        var images = $(this).find('img');
        var path = images.attr('src');
        console.log('Total of ' + images.length + ' Images');

    // Preload Images
        for( i= 0; i < images.length; i++ ) {

            images[i] = new Image();
            images[i].src = path;
            images[i].onload = function(){
                console.log('Loaded ' + images[i] + ' of ' + images.length);
            };

        }

    // End

});

Também - Como eu poderia modificar meueach() loop, para verificar cada um painel, após o painel anterior ter terminado de verificar?

Qualquer ajuda seria ótimo. Obrigado.