Betöltés... Animáció Vanilla JavaScriptben

Bevezetés

Weboldalak és webalkalmazások fejlesztése során a betöltési animáció is jelentősen javíthatja a felhasználói élményt azáltal, hogy kommunikál a történésekről. Ez leköti a felhasználókat, és leköti a figyelmüket a tartalom betöltése közben, és segít a felhasználóknak megérteni, mi történik, ahelyett, hogy találgatásokra hagynák őket.

Ebben az útmutatóban megvizsgáljuk, hogyan használhatjuk a Vanilla JavaScriptet betöltési animáció létrehozásához. Mindkét animációval fogunk dolgozni GIF-ek és CSS-alapú betöltőkkel, és nézze meg, hogyan használhatja őket két forgatókönyv szerint: tartalom betöltése az alkalmazás/webhely indításakor vagy tartalom kérése egy külső API-ból.

Hogyan készítsünk betöltőt

Az emberek különféle módokon jeleníthetik meg betöltőjüket. Ennek az útmutatónak a céljára létrehozunk egy betöltőt, amely lefedi a teljes képernyőt, majd eltűnik, amikor az oldal betöltődik. Először is létre kell hoznunk egy helyőrző HTML oldalt:

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

Az egyszerűség kedvéért csak kettőnk van <div> blokkok – egy a betöltőhöz, egy pedig a webhely tartalmához.

Mint korábban említettük, a betöltési ikon lehet a GIF, egy CSS-sel létrehozott animált ikon vagy valami más. Fontos megjegyezni, hogy ugyanez a megközelítés vonatkozik minden általunk használt betöltési ikonra.

Hozzon létre betöltőt GIF segítségével

A GIF egy animált ikon, amely korlátlan ideig játszik. Egyszer létrehoztuk a sajátunkat GIF, stílust fogunk alakítani a loader-container div, amely otthont ad. Számos módja van a stílusnak! Itt lehet igazán kreatív. Egyszerűen hozzáadunk egy fekete hátterű réteget oldalunk tetejére az ikon mellé, hogy „kizárjuk” a betöltődő tartalmat:

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

Amikor most betöltjük weboldalunkat, egy fekete hátteret fogunk látni, amelyen a GIF betöltés a képernyő közepén, ehhez hasonlóan:

Ezen a ponton készen állunk a JavaScript használatával történő betöltés megvalósítására. De nézzük meg azt is, hogyan használhatunk CSS-ben készített animációt a helyett GIF, amelynek importálásához nincs szükség további fájlra.

Hozzon létre betöltőt CSS használatával

Pontosan ugyanazt az ikont hozzuk létre a CSS-szel. Ne feledje, létrehoztunk egy extra divet (spinner) benne loader-container div, és ezt fogjuk használni az ikon ábrázolására:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

A fenti kód segítségével létrehozhatunk egy CSS-betöltő ikont, amelynek most a loader-container div-t használhatjuk középre, és hozzáadhatjuk a fekete hátteret, ahogy korábban tettük:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

Most, hogy láttuk a kétféle animált betöltőt, használjuk a JavaScriptet annak szabályozására, hogy mikor jelenjen meg és tűnjön el ez a betöltési animáció.

Betöltési animáció megvalósítása JavaScript segítségével

A JavaScript lehetővé teszi számunkra, hogy manipuláljuk HTML-struktúránkat, és eltávolítsuk vagy elrejtsük a loader-container amely jelenleg látható előtt a weboldal tartalma. Két fő megközelítés létezik ennek megvalósítására – csak elrejteni a loader-container, vagy teljesen eltávolítja.

Bármelyik megközelítést is választja, az első lépés a querySelector() or getElementById() visszaszerezni a loader-container hogy manipulálhassuk:

const loaderContainer = document.querySelector('.loader-container');

Másodszor, a eventListener hallgatni a load eseményt, így meghívja a visszahívási funkciót, amikor a load esemény történik:

window.addEventListener('load', () => { // ...
});

A Betöltés… elem elrejtése

A leggyakoribb megközelítés az, hogy elrejtse a loader-container val vel display: none hogy a tartalom teljes betöltésekor eltűnjön.

A HTML DOM lehetővé teszi a HTML elemeink stílusának megváltoztatását JavaScriptből, az alábbi kód pedig azt jelzi, hogy a betöltő konténerét állítjuk be. display tulajdonhoz none hogy ne egyszer jelenjen meg a load sikeres:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

Alternatív megoldásként létrehozhat egy külön osztályt, amely rendelkezik display: none ingatlan:

.loader-container-hidden { display: none;
}

És majd classList.add() hogy hozzáadja az osztályt a loader-container elem:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

A Loading… elem eltávolítása

Eddig egy fő módszert láttunk, amely lehetővé teszi, hogy elrejtsük loader-container, ami arra utal, hogy az elem továbbra is jelen van, de rejtve. Egy másik lehetőség az elem teljes eltávolítása:

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

Ezen a ponton, amikor betöltjük oldalunkat, a betöltési animáció addig jelenik meg, amíg az oldal tartalma teljesen be nem töltődik.

Betöltési animáció megvalósítása külső tartalom kérésekor API-tól

A tartalom külső API-ból történő lekérése egy másik helyzet, amelyhez betöltő beépítése szükséges. Az ilyen típusú tartalom lekérése és megjelenítése eltarthat egy ideig, ezért a legjobb, ha betöltőt használ.

Esetünkben próbáljunk meg árajánlatot kérni a idézi az API-t a beépített Fetch API használatával. Figyelje meg, hogy a cikk elején létrehozott HTML-ben a „Ajánlat generálása” gomb. Mindössze annyit kell tennünk, hogy használjuk a document.querxySelector() metódus az elem beszerzéséhez és egy visszahívási függvény létrehozása a kezeléséhez click esemény, amely akkor indul el, amikor a felhasználó rákattint a gombra:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Ez sikeresen segít abban, hogy véletlenszerű árajánlatokat kapjunk alkalmazásunkba, de szeretnénk, ha a animáció betöltése hogy a felhasználó tudja, hogy tartalmat várunk. Ennek eléréséhez két módszert hozunk létre, az egyiket a loader-container a másik pedig elrejteni:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

Ezen a ponton végre beépíthetjük a betöltési animációt a visszahívási funkcióba. Amikor a lekérés megkezdődik, a visszahívási funkció megjeleníti a betöltési animációt, és elrejti az adatok fogadása után:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Következtetés

Ebben a cikkben megtanultuk, hogyan lehet a vanilla JavaScriptet betöltési animáció létrehozásához és megfelelő megjelenítéséhez használni. Különféle megközelítéseket mérlegeltünk ennek megvalósítására, és megvizsgáltunk néhány különböző használati esetet a betöltési animációhoz. Úgy döntöttünk, hogy a forgó kört rakodóként használjuk, de tetszőleges módon megváltoztathatja – nyugodtan készítse el a sajátját GIF vagy CSS animált betöltő.

• Coinsmart. Európa legjobb Bitcoin- és kriptográfiai tőzsdéje.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. SZABAD HOZZÁFÉRÉS.
• CryptoHawk. Altcoin radar. Ingyenes próbaverzió.
• Forrás: https://stackabuse.com/loading-animation-in-vanilla-javascript/