KategorieProgramowanieWeb Developer

[jQuery] Jak sprawdzić czy zostały załadowane wszystkie obrazki ?

Dziś wykorzystanie AJAX-a jest tak częste, że niemal każda strona wykorzystuje ten mechanizm. Jednak jego wykorzystywanie na stronach niesie za sobą pewne komplikacje w budowie takowych stron. Jedną z takowych komplikacji jest uchwycenie momentu załadowania całej treści, łącznie z obrazkami.

W stronach bez dynamicznego doładowywania treści nie ma problemu

 
$(windows).bind('load', function() {
    // ... kod ...
});

lub dla lubiących czysty JS

 
window.onload = function() {
    // ... kod ...
};

Jeśli jednak zaczynamy opracowywać mechanizmy w których mamy do czynienia z ładowaniem treści za pomocą AJAX-a i chcemy zmierzyć wysokość kontenera do którego załadowaliśmy treść to okazuje się że dane są nieprawdziwe. Wynika to z faktu że o ile moment pobrania treści jest nam znany, to nie wiemy kiedy zostaną załadowane obrazki znajdujące się w tej treści.

Rozwiązaniem problemu jest wyszukanie wszystkich obrazków w załadowanym kontenerze i podpięcie funkcji pod zdarzenie load. Zdarzenie to zostaje wywołane, gdy obrazek zostanie załadowany.

Poniżej przedstawiam funkcję realizującą powyższe zadanie.

function imagesLoaded(container, callback) 
{
    //wyszukanie wszystkich elementów IMG w kontenerze
    var images = $(container).find('img');

    //określenie ilości elementów IMG
    var imagesLength = images.length;

    //licznik przechowujący liczbę załadowanych obrazków
    var imagesLoad = 0;

    //sprawdzamy czy są jakieś obrazki
    if (imagesLength) 
    {

        //podpinamy funkcję pod zdarzenie "load"
        images.on('load', function() {

            //gdy obrazek zostanie załadowany zwiększamy 
            //wartość licznika
            imagesLoad++;

            //jeśli liczba załadowanych obrazków jest taka
            //sama jak liczba obrazków uruchamiamy funkcję 
            //użytkownika
            if (imagesLoad == imagesLength) 
            {
                //wywołanie funkcji użytkownika
                callback();
            }
        });
    }
    else 
    {
        //wywołanie funkcji użytkownika
        callback();
    }
}

Przykładowe użycie znajdziecie w JSFIDDLE.

Docelowo powinny wyświetlić się wam dwie różne wartości jednak nie jest to 100% pewne. Ta niepewność wynika z zachowań przeglądarek, które wywołują zdarzenie load na obrazku tylko przy pierwszym jego ładowaniu lub gdy nie ma go w pamięci.

Możecie poczytać także o ładowaniu obrazków w dokumentacji jQuery.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.