Ladataan… Vanilla JavaScript -animaatio

esittely

Kun kehitetään verkkosivustoja ja verkkosovelluksia, latausanimaatio voi parantaa käyttäjäkokemusta merkittävästi viestimällä siitä, mitä tapahtuu. Tämä sitouttaa käyttäjät ja pitää heidän huomionsa sisällön lataamisen aikana, ja se auttaa käyttäjiä ymmärtämään, mitä tapahtuu, sen sijaan, että he jättäisivät heidät arvailemaan.

Tässä oppaassa tarkastellaan, kuinka Vanilla JavaScriptiä käytetään latausanimaatioiden luomiseen. Työskentelemme molempien animaatioiden kanssa GIF ja CSS:llä luotuja latauslaitteita ja katso, kuinka voit käyttää niitä kahdessa skenaariossa: sisällön lataaminen sovelluksen/verkkosivuston käynnistyksen yhteydessä tai sisällön pyytäminen ulkoisesta API:sta.

Kuinka luoda kuormaaja

Ihmiset saattavat haluta näyttää kuormaimensa useilla eri tavoilla. Tätä opasta varten rakennamme latausohjelman, joka peittää koko näytön ja katoaa, kun sivu on latautunut. Ensinnäkin meidän on luotava paikkamerkki HTML-sivu:

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

Yksinkertaisuuden vuoksi meillä on vain kaksi <div> lohkot – yksi lataajalle ja yksi verkkosivuston sisällölle.

Kuten aiemmin mainittiin, latauskuvake voi olla a GIF, CSS:llä luotu animoitu kuvake tai jotain muuta. On tärkeää muistaa, että sama lähestymistapa pätee kaikkiin käyttämiimme latauskuvakkeisiin.

Luo latausohjelma GIF-tiedoston avulla

A GIF on animoitu kuvake, jota toistetaan loputtomasti. Yhden kerran olemme luoneet omamme GIF, muokkaamme tyyliä loader-container div, joka sijoittaa sen. On monia tapoja muotoilla se! Täällä voit olla todella luova. Lisäämme yksinkertaisesti mustalla taustalla olevan kerroksen sivumme yläosaan kuvakkeen viereen, jotta latautuva sisältö "sulkee":

.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;
}

Kun lataamme verkkosivumme nyt, näemme mustan taustan, jossa on a GIF lataus keskellä näyttöä, samanlainen kuin tämä:

Tässä vaiheessa olemme valmiita lataamaan JavaScriptin avulla. Mutta katsotaanpa myös, kuinka voimme käyttää CSS:llä luotua animaatiota a GIF, jonka tuonti ei vaadi lisätiedostoa.

Luo latausohjelma CSS:n avulla

Luomme täsmälleen saman kuvakkeen CSS:n kanssa. Muista, loimme ylimääräisen div (spinner) sisällä loader-container div ja sitä käytämme kuvaamaan kuvaketta:

.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); }
}

Yllä oleva koodi auttaa meitä luomaan CSS-latauskuvakkeen, jonka keskittämiseen voidaan nyt käyttää loader-container-div-komentoa ja lisätä musta tausta kuten teimme aiemmin:

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

Nyt kun olemme nähneet saatavilla olevat kaksi animoitua latausohjelmaa, ohjataan JavaScriptin avulla, milloin tämä latausanimaatio ilmestyy ja katoaa.

Ladattavan animaation toteuttaminen JavaScriptillä

JavaScriptin avulla voimme manipuloida HTML-rakennettamme ja poistaa tai piilottaa loader-container joka on tällä hetkellä näytössä edessä sivuston sisältö. Tämän saavuttamiseksi on kaksi pääasiallista lähestymistapaa – vain piilottaminen loader-containertai poistamalla sen kokonaan.

Minkä lähestymistavan valitsetkin, ensimmäinen askel on käyttää querySelector() or getElementById() hakea loader-container jotta voimme manipuloida sitä:

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

Toiseksi käytämme eventListener kuunnella a load tapahtuma, jotta se kutsuu takaisinsoittotoimintoa, kun load tapahtuma tapahtuu:

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

Ladataan… -elementin piilottaminen

Yleisin tapa on piilottaa loader-container with display: none niin, että se katoaa, kun sisältö on ladattu täyteen.

HTML DOM antaa meille mahdollisuuden muuttaa HTML-elementtiemme tyyliä JavaScriptistä, ja alla oleva koodi osoittaa, että asetamme lataajan säilöä display omaisuutta none jotta se ei tule näkyviin kerran load on onnistunut:

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

Vaihtoehtoisesti voit luoda erillisen luokan, joka pitää display: none omaisuus:

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

Ja sitten classList.add() lisätäksesi luokan ryhmään loader-container elementti:

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

Poistetaan Loading… -elementtiä

Toistaiseksi olemme nähneet tärkeän menetelmän, jonka avulla voimme piilottaa omamme loader-container, mikä tarkoittaa, että elementti on edelleen läsnä, mutta piilotettu. Toinen vaihtoehto on poistaa elementti kokonaan:

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

Tässä vaiheessa, kun lataamme sivumme, latausanimaatio näkyy, kunnes sivun sisältö on latautunut kokonaan.

Latausanimaatioiden käyttöönotto, kun ulkoista sisältöä pyydetään API:lta

Sisällön hakeminen ulkoisesta API:sta on toinen tilanne, joka saattaa edellyttää latausohjelman lisäämistä. Tämäntyyppisen sisällön hakeminen ja näyttäminen voi kestää jonkin aikaa, joten on parasta sisällyttää latausohjelma.

Meidän tapauksessamme yritetään saada lainaus a lainaus API käyttämällä sisäänrakennettua Fetch API:ta. Huomaa, että tämän artikkelin alussa luomassamme HTML-koodissa on a "Luo tarjous" -painiketta. Meidän tarvitsee vain käyttää document.querxySelector() menetelmä saada elementti ja luoda takaisinsoittofunktio käsittelemään a click tapahtuma, joka käynnistyy, kun käyttäjä napsauttaa painiketta:

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; });
});

Tämä auttaa meitä saamaan satunnaisia ​​tarjouksia sovellukseemme, mutta haluaisimme a ladata animaatiota jotta käyttäjä tietää, että odotamme sisältöä. Tämän saavuttamiseksi luomme kaksi menetelmää, joista toinen näyttää loader-container ja toinen piilottaakseen sen:

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

Tässä vaiheessa voimme vihdoin sisällyttää latausanimaatiota takaisinsoittotoimintoon. Kun nouto alkaa, takaisinsoittotoiminto näyttää latausanimaatiota ja piilottaa sen, kun tiedot on vastaanotettu:

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; });
});

Yhteenveto

Tässä artikkelissa olemme oppineet käyttämään vanilja JavaScriptiä latausanimaatioiden luomiseen ja näyttämiseen asianmukaisesti. Pohdimme erilaisia ​​lähestymistapoja tämän saavuttamiseksi ja tarkastelimme paria erilaista latausanimaatiota. Olemme päättäneet käyttää pyörivää ympyrää kuormaajana, mutta voit muuttaa sitä haluamallasi tavalla – voit luoda oman GIF tai CSS-animoitu latausohjelma.

• Coinsmart. Euroopan paras Bitcoin- ja kryptopörssi.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. VAPAA PÄÄSY.
• CryptoHawk. Altcoinin tutka. Ilmainen kokeilu.
• Lähde: https://stackabuse.com/loading-animation-in-vanilla-javascript/