Grafika na stronie

Przypuśćmy, że mamy obrazek img na stronie:

    <img src="./wietnam.jpg" class="img" alt="Kartofel w wietnamie" width="400" height="400">

Żeby móc na nim pracować, pobierzmy go i zbadajmy w konsoli (zrób to teraz):

const img = document.querySelector(".img");
console.dir(img);

Podobnie jak inne elementy i nasza grafika udostępnia nam masę metod i właściwości, które będą nam pomocne.

Wśród nich jednymi z najczęściej używanymi są:

const obr = document.querySelector(".img");
console.log(`Szerokość: ${img.width}, wysokość: ${img.height}, src: ${img.src}`);

Konstruktor Image()

W Javascript obrazki możemy tworzyć na kilka sposobów. Można tutaj wykorzystać np. document.createElement("img"), ale też możemy skorzystać z konstruktora Image(). Przyjmuje on dwa opcjonalne parametry określające szerokość i wysokość.

const img = new Image();
img.src = "test.jpg";

//lub
const img = document.createElement("img");
img.src = "test.jpg";

Stworzona w ten sposób grafika jest ściągana na urządzenie użytkownika, co bardzo przydaje się w momencie, gdy chcemy zawczasu wczytać daną grafikę.

Zdarzenie load

Obiekty wczytywane (np. window, image, iframe itp.) posiadają zdarzenie load, które wykrywa, czy dany obiekt został w pełni załadowany.

Dla obiektu window zdarzenie to oznacza wczytanie całego dokument dom oraz wszystkich grafik (w przeciwieństwie do DOMContentLoaded, które odpalane jest po wczytaniu drzewa DOM, ale przed wczytaniem grafik).
Dla grafiki oznacza to wczytanie danej grafiki:

img.addEventListener("load", e => {
    console.log("Dana grafika została załadowana");
});

img.src = "lorem.jpg"; //wpierw ustawiamy zdarzenie, potem ustawiamy src

Jeżeli w powyższym skrypcie zdarzenie load ustawilibyśmy po ustawieniu src, skrypt mógł by zadziałać nieprawidłowo. Może zdarzyć się sytuacja, że obrazek wczyta się natychmiastowo po ustawieniu src (np. siedzi już w cache przeglądarki). Oznacza to, że obrazek wczyta się przed odpaleniem nasłuchiwania eventu load.

Są jednak sytuacje (szczególnie przy bardziej skomplikowanych skryptach), że nie jesteśmy w stanie zagwarantować takiej kolejności. Przykładowo system podpina wszystkie zdarzenia, a gdzieś dalej dopiero budowane są src grafik w systemie. W takim przypadku warto sprawdzić właściwość complete każdej grafiki, która wskazuje czy dany obrazek jest wczytany czy nie. Jeżeli tak się stanie odpalimy dla niej zdarzenie load.

img.src = "lorem.jpg";

img.addEventListener("load", e => {
    console.log("Dana grafika została załadowana");
});

if (img.complete) {
    const loadEvent = new Event("load");
    img.dispatchEvent(loadEvent);
}

Postęp wczytywania grafik na stronie

Wyobraź sobie, że naszym zadaniem będzie zrobienie paska ładowania grafik użytych na stronie.

Aby to zrealizować, zacznijmy od przygotowania elementu z paskiem postępu:

.loading-bar {
    margin: 30px 0;
    height: 10px;
    border-radius: 10px;
    background: #eee;
    display: flex;
    overflow:hidden;
}

.loading-bar__progress {
    background: tomato;
}

<div id="loading-bar">
    <div class="loading-bar__progress"></div>
</div>

Sam skrypt będzie raczej prosty. Tworzymy tablicę ze ścieżkami do grafik oraz pustą tablicę, do której będziemy wrzucać obiekty typu Images, które będą miały ustawione src takie jak poszczególne elementy w tablicy.

//tablica z nazwami obrazków do załadowania
const imgNames = [
    "obrazek1.gif",
    "obrazek2.gif",
    "obrazek3.gif",
    "obrazek4.gif",
    "obrazek5.gif",
    "obrazek6.gif"
];

const loadingStep = (100 / imgNames.length); //szerokość oznaczająca % paska po załadowaniu 1 obrazka

const images = []; //tablica będzie zawierała obiekty Image

const loading = document.querySelector(".loading");
const loadingBar = loading.querySelector(".loading-progress");

//funkcja rozpoczynająca ładowanie obrazków
function startLoading(cb) {
    imgNames.forEach(name => {
        const img = new Image();
        //po wczytaniu grafiki wrzucam nowe Image() do tablicy images
        //sprawdzam ile elementów ma ta tablica i na tej podstawie ustawiam szerokość paska postępu

        img.addEventListener("load", e => {
            images.push(img);
            loadingBar.style.width = `${images.length * loadingStep}%`; //zmieniamy szerokość paska w %

            if (images.length >= imgNames.length) {
                cb(); //odpalam jakąś funkcję po zakończeniu wczytywania
            }
        });
        img.src = name;

        if (img.complete) {
            img.dispatchEvent(new Event("load"));
        }
    });
}

startLoading(function() {
    alert("Zakończono wczytywanie")
});

Powyższy przykład możesz zobaczyć w działaniu tutaj.

Wczytywanie grafiki i obietnice

Wczytywanie to proces asynchroniczny, więc jest to idealne miejsce by zastosować obietnice lub async/await.

Napiszmy prostą funkcję, która zwróci nam obietnicę, która zostanie rozwiązana, gdy grafika zostanie wczytana. W przeciwnym razie zostanie zwrócony błąd. Tak naprawdę są to powyżej zebrane informacje okryte za pomocą Promise:

function loadImage(name, src) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        //zwracamy obiekt, który będzie miał 2 klucze:
        //name - nazwa którą będziemy podawać przy odwoływaniu się do tej grafiki
        //img - właściwy element img, który będzie zwracany
        img.addEventListener("load", e => resolve({name, img}));
        img.addEventListener("error", e => reject(e));
        img.src = src;

        if (img.complete) {
            const loadEvent = new Event("load");
            img.dispatchEvent(loadEvent);
        }
    });
}

Wykorzystajmy ją w funkcji wczytującej kilka grafik na raz:

const graphicCollection = [
    {name : "hero" , src : "graphic-to-load/aniolek.jpg"},
    {name : "icon" , src : "graphic-to-load/aniolek2.jpg"},
    {name : "cats" , src : "graphic-to-load/book.jpg"},
    {name : "pies" , src : "graphic-to-load/bum.jpg"}
];

const loadImages = function(sources) {
    const promises = sources.map(img => loadImage(img.name, img.src));
    return Promise.all(promises);
}

Od tej pory oczekiwanie na wczytanie wszystkich grafik będzie bardzo proste:

loadImages(graphicCollection).then(data => {
    //kluczami będą nazwy grafik - np. grafika1, grafika-moja2, grafika-inna3
    data.forEach(img => {
        images.set(img.name, img.img);
    });

    console.log("hero -> ", images.get("hero"));
    console.log("icon -> ", images.get("icon"));
    console.log("cats -> ", images.get("cats"));
    console.log("pies -> ", images.get("pies"));
});

Oba powyższe rozwiązania nie są idealnymi. Wynika to z faktu, że zdarzenie load odpalane jest już po wczytaniu grafiki. Jeżeli takie grafiki będą dużych rozmiarów, wczytywanie takie nie będzie płynne a skokowe.

Jeżeli chcielibyśmy pokazywać postęp, który by wskazywał także ile załadowano pojedynczej grafiki, wtedy musielibyśmy użyć innej techniki.

Lazy loading

Lazy loading to metoda wczytywania obrazków polegająca na tym, że dany obrazek wczytywany jest dopiero w momencie gdy pojawi się na ekranie.

W nowych przeglądarkach wczytywanie takie możemy uzyskać za pomocą dodatkowego atrybutu lazy dla elementów img:

<img src="image.png" loading="lazy" alt="...">
<iframe src="https://example.com" loading="lazy"></iframe>

Atrybut ten może przyjąć jedną z wartości:

W przypadku, gdy dana przeglądarka nie obsługuje powyższego atrybutu, możemy skorzystać z kilku metod naprawy tego stanu.

Pierwszą z nich jest użycie tak zwane IntersectObserver, który nasłuchuje, czy dane elementy znalazły się w zadanym obszarze.

Drugą jest użycie jednego z eventów resize, scroll i orientationchange.

Nie będę tutaj duplikował czyjegoś kodu i zwyczajnie odeślę was pod ten adres, gdzie został pokazany stosowny kod.