care nu a avut probleme încercând că site-ul nu a văzut în timp ce conținutul a fost încărcat? Același lucru sa întâmplat pe ultimul meu site web. Designul a avut o mulțime de imagini în fiecare secțiune, cu fotografii imposibil de optimizat prin natura sa, care determină un efect neclar asupra fiecărei schimbări de pagină: designul a fost amestecat până când imaginile au fost digerate pentru a fi descărcate. Soluția? Printre multe posibilități am decis să creez un încărcător care acoperă întregul site până când a fost pregătit să paradă prin ochii vizitatorilor mei.
Prin rețeaua am văzut multe fragmente sau coduri, care le-ar putea rezolva; Dar marea majoritate depășită. Din acest motiv, am decis să programez un sistem modern pe care îl împărtășesc astfel încât oricine să o poată folosi.
cod sau fragment
Este foarte important ca HTML și CSS al încărcătorului să fie Primul lucru pe care utilizatorul îl vede, chiar înainte de fișierul CSS cu stilurile dvs. să sosească procesat. Prin urmare, trebuie să îl includeți în brut și, de asemenea, unde începe organismul. În exemplul vă las un aspect în care este acoperit totul vizibil, adaugă un fundal alb și, pe de altă parte, focalizează o rotire (rotația cercului de cerc).
DIV ID = „78E2E55236″>
<body> <!-- Loading --> <style> .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: 1s all; opacity: 0; } .loading.show { opacity: 1; } .loading .spin { border: 3px solid hsla(185, 100%, 62%, 0.2); border-top-color: #3cefff; border-radius: 50%; width: 3em; height: 3em; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style> <div class="loading show"> <div class="spin"></div> </div> <!--- Resto de tu HTML --></body>ce să se aștepte atunci când este necesar. Următorul cod șterge încărcarea când:
- DOM este gata (HTML).
- Toate imaginile au fost descărcate.
- Acest prezentă HTML Încărcător (reprezentat cu clasa de încărcare).
Acordați o atenție deosebită acestei linii.
DIV ID = „78E2E55236″>
Loading(1000).init();Indică întârzierea, în milisecunde, atunci când ștergeți încărcătorul când totul este descărcat. Și init () va fi responsabil pentru activarea logicii.
Complet și optimizat
astfel încât să îl puteți utiliza direct Am lăsat exemplul cu codul JavaScript minim (eliminarea comentariilor și spațiile pentru Ocupa mai puțin).
Div id = „78E2E55236″>
<!-- Loading CSS --><style> .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: 1s all; opacity: 0; } .loading.show { opacity: 1; } .loading .spin { border: 3px solid hsla(185, 100%, 62%, 0.2); border-top-color: #3cefff; border-radius: 50%; width: 3em; height: 3em; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style><!-- Loading HTML --><div class="loading show"> <div class="spin"></div></div><!-- Loading Javascript --><script>// Loadingvar Loading=(loadingDelayHidden=0)=>{let loading=null;const myLoadingDelayHidden=loadingDelayHidden;let imgs=;let lenImgs=0;let counterImgsLoading=0;function incrementCounterImgs(){counterImgsLoading+=1;if(counterImgsLoading===lenImgs){hideLoading()}}function hideLoading(){if(loading!==null){loading.classList.remove('show');setTimeout(function(){loading.remove()},myLoadingDelayHidden)}}function init(){document.addEventListener('DOMContentLoaded',function(){loading=document.querySelector('.loading');imgs=Array.from(document.images);lenImgs=imgs.length;if(imgs.length===0){hideLoading()}else{imgs.forEach(function(img){img.addEventListener('load',incrementCounterImgs,false)})}})}return{'init':init}}Loading(1000).init();</script>div id = „3fd8f36b61”
desktop versiune