Wstępne ładowanie obrazów i [obiekt HTMLImageElement]

Próbuję utworzyć preloader, ale kiedy to uruchomię, konsola wyświetli to:

Załadowany[obiekt HTMLImageElement] z 5

z tej linii kodu

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

Ale idealnie chcę, aby wyświetlał:

„Załadowany 1 z 5”

Jak mogę to naprawić? Chcę tylko utworzyć to jako wywołanie zwrotne, więc wiem, kiedy wszystkie obrazy w określonym panelu zostały załadowane.

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

});

Również - Jak mogę zmodyfikować mojeeach() pętli, aby sprawdzić każdy panel, po zakończeniu poprzedniego panelu?

Każda pomoc byłaby świetna. Dzięki.

questionAnswers(1)

yourAnswerToTheQuestion