Nalaganje ... Animacija v Vanilla JavaScript

Predstavitev

Pri razvoju spletnih mest in spletnih aplikacij lahko vključno z animacijo nalaganja bistveno izboljša uporabniško izkušnjo s sporočanjem, kaj se dogaja. To pritegne uporabnike in ohranja njihovo pozornost med nalaganjem vsebine ter uporabnikom pomaga razumeti, kaj se dogaja, namesto da bi ugibali.

V tem priročniku si bomo ogledali, kako uporabiti Vanilla JavaScript za ustvarjanje animacije nalaganja. Delali bomo z obema animiranima GIF in nalagalnike, ustvarjene s CSS, in si oglejte, kako jih uporabiti v dveh scenarijih: nalaganje vsebine ob zagonu aplikacije/spletnega mesta ali zahtevanje vsebine iz zunanjega API-ja.

Kako ustvariti nakladalnik

Ljudje lahko na več načinov prikažejo svoj nakladalnik. Za namene tega vodnika bomo zgradili nalagalnik, ki bo pokrival celoten zaslon in nato izginil, ko se bo stran naložila. Najprej moramo ustvariti nadomestno stran HTML:

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

Zaradi poenostavitve imamo samo dva <div> bloki – eden za nalagalnik in eden za vsebino spletnega mesta.

Kot je bilo že omenjeno, je ikona za nalaganje lahko a GIF, animirano ikono, ustvarjeno s CSS, ali kaj drugega. Pomembno si je zapomniti, da enak pristop velja za vse vrste ikon za nalaganje, ki jih uporabljamo.

Ustvarite nalagalnik z GIF-om

A GIF je animirana ikona, ki se predvaja neomejeno. Enkrat ustvarili smo svoje GIF, stilizirali bomo loader-container div, ki ga bo hranil. Obstaja veliko načinov za oblikovanje! Tukaj ste lahko res ustvarjalni. Enostavno bomo dodali plast s črnim ozadjem na vrhu naše strani poleg ikone, da bomo »blokirali« nalaganje vsebine:

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

Ko zdaj naložimo našo spletno stran, bomo videli črno ozadje z a GIF nalaganje na sredini zaslona, ​​podobno temu:

Na tej točki smo pripravljeni za implementacijo nalaganja z uporabo JavaScripta. Poglejmo pa tudi, kako lahko uporabimo animacijo, ustvarjeno s CSS, namesto GIF, ki za uvoz ne potrebuje dodatne datoteke.

Ustvarite nalagalnik z uporabo CSS

Popolnoma enako ikono bomo ustvarili s CSS. Ne pozabite, ustvarili smo dodaten div (spinner) znotraj loader-container div in to je tisto, kar bomo uporabili za predstavitev ikone:

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

Zgornja koda nam bo pomagala ustvariti ikono nalagalnika CSS, za katero lahko zdaj uporabimo div vsebnika nalagalnika, da ga sredimo in dodamo črno ozadje, kot smo storili prej:

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

Zdaj, ko smo videli dve vrsti animiranih nalagalnikov, ki sta na voljo, uporabimo JavaScript za nadzor, kdaj se ta nalagalna animacija pojavi in ​​izgine.

Kako implementirati animacijo nalaganja z JavaScriptom

JavaScript nam omogoča, da manipuliramo z našo strukturo HTML in odstranimo ali skrijemo loader-container ki je trenutno prikazan pred vsebino spletne strani. Obstajata dva glavna pristopa za dosego tega – samo skrivanje loader-container, ali pa ga v celoti odstranite.

Ne glede na to, kateri pristop izberete, je prvi korak uporaba querySelector() or getElementById() za nalaganje loader-container da lahko z njim manipuliramo:

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

Drugič, uporabljali bomo eventListener poslušati za a load dogodek, tako da pokliče funkcijo povratnega klica, ko je load pride do dogodka:

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

Skrivanje elementa Nalaganje ...

Najpogostejši pristop je skrivanje loader-container z display: none tako da izgine, ko je vsebina v celoti naložena.

HTML DOM nam omogoča, da spremenimo slog naših elementov HTML iz JavaScripta, spodnja koda pa kaže, da nastavljamo vsebnik nalagalnika display premoženje none tako da se ne pojavi enkrat load je uspešen:

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

Lahko pa ustvarite ločen razred, ki drži display: none lastnost:

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

In potem uporabite classList.add() da dodate razred v loader-container Element:

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

Odstranjevanje elementa Nalaganje…

Doslej smo videli glavno metodo, ki nam omogoča, da skrijemo svoje loader-container, kar pomeni, da je element še vedno prisoten, vendar skrit. Druga možnost je, da element popolnoma odstranite:

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

Na tej točki, ko naložimo svojo stran, bo prikazana animacija nalaganja, dokler se vsebina strani v celoti ne naloži.

Implementacija animacije nalaganja pri zahtevi zunanje vsebine iz API-ja

Pridobivanje vsebine iz zunanjega API-ja je še ena situacija, ki bo morda zahtevala vključitev nalagalnika. Pridobivanje in prikaz te vrste vsebine lahko traja nekaj časa, zato je najbolje vključiti nalagalnik.

V našem primeru poskusimo pridobiti citat od a citati API z uporabo vgrajenega API-ja Fetch. Upoštevajte, da ima HTML, ki smo ga ustvarili na začetku tega članka, a "Ustvari ponudbo" gumb. Vse kar moramo storiti je, da uporabimo document.querxySelector() metoda za pridobitev elementa in ustvarjanje funkcije povratnega klica za obdelavo a click dogodek, ki se sproži, ko uporabnik klikne gumb:

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

To nam bo uspešno pomagalo pri pridobivanju naključnih ponudb v našo aplikacijo, vendar bi radi imeli nalaganje animacije tako da uporabnik ve, da pričakujemo vsebino. Da bi to dosegli, bomo ustvarili dve metodi, eno za prikaz loader-container in drugi, da ga skrijete:

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

Na tej točki lahko končno vključimo animacijo nalaganja v funkcijo povratnega klica. Ko se pridobivanje začne, bo funkcija povratnega klica prikazala animacijo nalaganja in jo skrila, ko bodo podatki prejeti:

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

zaključek

V tem članku smo se naučili, kako uporabiti vanilla JavaScript, da ustvarimo animacijo nalaganja in jo ustrezno prikažemo. Razmislili smo o različnih pristopih za dosego tega in si ogledali nekaj različnih primerov uporabe za animacijo nalaganja. Odločili smo se za uporabo vrtljivega kroga kot nalagalnika, vendar ga lahko spremenite na kakršenkoli način – lahko ustvarite svojega GIF ali animirani nalagalnik CSS.

• Coinsmart. Najboljša evropska borza bitcoinov in kriptovalut.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. PROST DOSTOP.
• CryptoHawk. Altcoin radar. Brezplačen preizkus.
• Vir: https://stackabuse.com/loading-animation-in-vanilla-javascript/