Estoy intentando crear preloader, pero cuando ejecuto esto, la consola muestra esto:

Cargado[objeto HTMLImageElement] de 5

de esta linea de codigo

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

Pero idealmente quiero que muestre:

"Cargado 1 de 5"

¿Cómo puedo arreglar esto? Solo quiero crear esto como una devolución de llamada para saber cuándo se han cargado todas las imágenes en un panel determinado.

$(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

});

También - ¿Cómo podría modificar mieach() bucle, para comprobar cada panel, después de que el panel anterior haya terminado de verificar?

Cualquier ayuda sería genial. Gracias.