Hogyan készítsünk GIF-előtöltőt késleltetéssel. Teljes értékű JS előtöltőt készítünk AJAX alkalmazáshoz. Az előtöltő létrehozásának szakaszai
Nagyon divatossá vált az előtöltők készítése, mert gyönyörűen néznek ki, és ami a legfontosabb, arra kényszerítik a felhasználót, hogy ne hagyja el az oldalt még betöltés közben.
Hogyan készítsünk előtöltőt egy weboldalhoz?Maga a preloader néhány másodperc alatt elkészíthető, ha kész megoldásokat használsz, vagy pár perc alatt, ha mindent magad írsz a semmiből :)
De vegyük sorba a dolgokat...
A böngésző lényege, hogy lépésről lépésre jeleníti meg a kódot. Ez azt jelenti, hogy a böngésző végigmegy az összes kódon felülről lefelé, és ha valahol a kód közepén súlyos JS-szkriptekkel találkozik, az oldal ezen a ponton egy kicsit lefagy.
A Preloader úgy teszi, hogy az oldal teljes tartalmát elrejtjük, és csak akkor jelenítjük meg teljesen, ha a teljes webhely minden szkripttel és stílussal be van töltve.
Az előtöltő működésének rövid vázlata:
- Szó szerint közvetlenül a nyitó body tag után helyezünk egy div-t egy előtöltővel;
- Engedélyezze az előtöltőt, és rejtse el az oldal teljes tartalmát;
- Az oldal betöltése után távolítsa el az előtöltőt, és jelenítse meg a webhelyet.
Most pedig nézzük a kódot. Kezdetben egy div-t kell elhelyeznie egy előtöltővel, valami ilyesmi:
AreaForLoader ( háttér: lineáris gradiens (90 fok, #FF4E50 10%, #F9D423 90%); túlcsordulás: rejtett; pozíció: rögzített; bal: 0; felül: 0; jobb: 0; lent: 0; z-index: 9999 ;)
Az utolsó dolog, amit meg kell tennie, az az előtöltő elrejtése. Ehhez a következő jQuery kódot használhatja:
$(window).on("load", function () ( $preloader = $(.loaderArea"), $loader = $preloader.find(.loader"); $loader.fadeOut(); $preloader. delay(350).fadeOut("lassú"); ));
Alapvetően csak annyit kell tennie, hogy néhány szép animációt ad hozzá az előtöltőhöz. Találtam néhány érdekes példát az előtöltőkre is, ezért érdemes lehet megnézni őket:
Előtöltő létrehozása bővítmények segítségévelVannak más módok is az előtöltők és betöltősávok létrehozására. Például használhatja a speciális NProgress.js beépülő modult egy gyönyörű betöltési sáv létrehozásához, vagy használhatja az előtöltő tervezőt.
Ezt a két dolgot tökéletesen leírja az előtöltő létrehozásáról szóló oktatóvideó, ezért azt tanácsolom, hogy nézze meg ezt az oktatóvideót:
Preloader $(document).ready(function () ( NProgress.start (); NProgress.set (0.4); setTimeout(function () ( NProgress.done (); ), 4000; )); #hellopreloader>p(megjelenítés:nincs;)#hellopreloader_preload(megjelenítés: blokk;pozíció: rögzített;z-index: 99999;fent: 0;bal: 0;szélesség: 100%;magasság: 100%;min-szélesség: 1000 képpont ;háttér: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) center center no-repeat;background-size:131px;)
Hello-Site.ru. Ingyenes weboldal készítő.
var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el)(el.style.opacity = 1;var interhellopreloader = setInterval(function())(el.style.opacity = el.style.opacity - 0,05; if (el.style.oacity2. Hozzon létre CSS-stílusokat a div blokkhoz és az i elemhez (ikon).
#before-load ( pozíció: fix; /*blokk fix pozíciója*/ balra: 0; /*elem helyzete bal oldalon*/ felül: 0; /*elem helyzete felül*/ jobbra: 0 ; /*az elem helyzete a jobb oldalon*/ alul: 0; /*az elem helyzete alul*/ háttér: #fff; /*a blokk hátterének színe*/ z-index: 1001; / *az oldal összes eleme fölé helyezze*/ ) #before-load i ( font-size : 70px; /*ikon mérete*/ pozíció: abszolút; /*abszolút pozíció, a legközelebbi őséhez képest*/ balra: 50 %; /*a szülőblokk szélességének 50%-a balra*/ felül: 50%; /*a szülőblokk magasságának felső 50%-a*/ margó: -35px 0 0 -35px; /*az ikon eltolása így hogy középen van*/ ) 3. Adjunk hozzá egy szkriptet, amely elrejti az előtöltőt az oldal betöltése után (tehát amikor az ablak objektum betöltődik ): $(window).load(function() ( $("#before-load"). find("i").fadeOut().end().delay(400).fadeOut("lassú"); ));
Ha animált gif-képet szeretne használni az előtöltő indikátoraként, akkor a következő változtatásokat kell végrehajtania a fenti lépésekben:
Távolítsa el a Font Awesome osztályokat a HTML-kódból:
Végezze el a következő módosításokat a CSS-stílusokon (módosítsa a #before-load i (..) szabályt):
#before-load i ( szélesség: 70 képpont; /*a gif kép szélessége*/ magasság: 70 képpont; /*a gif kép magassága*/ pozíció: abszolút; bal: 50%; felül: 50%; háttér: url( "assets /images/img.gif") nincs ismétlés 50% 50%; /*a gif-kép helye (url) és egyéb paraméterek*/ margó: -35px 0 0 -35px; )
Letölthet animált gif képeket a webhelyéhez a http://preloaders.net/ forrásból, vagy használhatja ezt az archívumot.
Egyéni kérdés, hogy használjunk-e előtöltőt egy weboldalon vagy sem. Például egy egyoldalas weboldalhoz, minimális mennyiségű grafikával és képpel, ilyesmire nincs szükség.
Nézzük a másik végletet – egy pizzarendelési weboldalt. A legtöbb látogató mobiltelefonról rendel pizzát – ez pedig elvileg lassabb oldalbetöltési sebességet és plusz fényképeket jelent. Az ilyen oldalak előbetöltője nagyon hasznos lesz, a látogatók nem fogják látni az oldalalakítás csúnya folyamatát.
Most egy klasszikus forgó előtöltőt fogunk létrehozni tiszta CSS-ben, animációs tulajdonságok segítségével.
Hozzunk létre egy egyszerű HTML kódot, amely egy üres div címkéből áll a betöltő osztállyal, természetesen nem számítva a body tag-et.
A kód többi részét a stílusfájlba írjuk. Az eleje egy iskolai geometriaórára fog emlékeztetni - formák megismerésére.
Stílusok a rakodó osztályhozElőször rajzoljon egy szürke négyzetet 2 pixel vastagságú folytonos vonallal:
betöltő(
keret: 2px tömör #eae4ea;
}
150 pixel szélességgel és magassággal:
betöltő(
szélesség: 150 képpont;
magasság: 150 képpont;
}
Csak egy sor kóddal a négyzetből kör lett:
Határsugár: 50%;
Hozzon létre egy áttetsző árnyékot a körhöz:
Box-shadow: 0 -2px 2px rgba(0,0,0,.2);
És fessük zöldre az alsó keretet:
Szegély-alsó: 2px tömör #6ddfca;
Találjunk ki egy saját nevet az animációnak, a kör 3 másodperc alatt egyenletesen megtesz egy teljes fordulatot, és végtelenül forog az oldal betöltéséig.
Animáció: loader 3s lineáris végtelen;
Egy kör jó, de három kör jobb, főleg, hogy ebből kettő „hamis” lesz – csak stílusban, hiszen a pszeudoelemek biztosítják ezt a lehetőséget.
Rajzolj egy belső pszeudo-kört a valódi kör belsejébe, 20 képponttal (10px+10px) kisebb átmérőjű
Betöltő:előtt (
tartalom: "";
pozíció: abszolút;
felső: 10px;
balra: 10px;
alsó: 10px;
jobbra: 10px;
}
rózsaszín alsó kerettel, és gyorsabban fog forogni, mint a fő kör.
Betöltő:előtt (
border-bottom: 2px solid #d355be;
animáció: loader 2s lineáris végtelen;
}
Most jön az utókör, bár ő a legkisebb, de ő a leggyorsabb, 1 másodperc alatt tesz meg egy teljes kanyart és gyönyörű lila csíkja van.
Betöltő: után (
border-bottom: 2px solid #8c23ec;
animáció: loader 1s lineáris végtelen;
}
Az utókör behúzása a főkörhöz képest 22 pixel.
Felül: 22 képpont;
balra: 22px;
alsó: 22px;
jobbra: 22px;
Itt az ideje, hogy elindítsuk köreinket, ezt a transzformáció: rotate property - ami rotációt jelent. 0% a kezdés, és 100% a cél. Minden kör 360 fokkal elfordul.
Sok programozó optimalizálja a JavaScript- és CSS-kódot, hogy az oldal gyorsabban betöltődjön.
De nem mindegyik készít előtöltőt, amely szubjektíven gyorsabb betöltés hatását adja a felhasználónak.
1. számú módszer. Olcsó és vidám.
Az ötlet egyszerű - el kell helyeznie egy képet a közepén, amely megmutatja a felhasználónak, hogy az oldal még mindig betöltődik. A kód meglehetősen egyszerű, közvetlenül utána írjuk:
Ennek eredményeként közvetlenül a betöltés után megjelenik egy blokk animált folyamatjelző sávval az oldal közepén. A túlcsordulás paramétert módosítani kell, hogy ne jelenjen meg görgetősáv, és a felhasználó ne tudjon lefelé görgetni és megnézni az oldal tartalmát.
Ezután, ha minden betöltődött, el kell távolítania az előtöltőt, és láthatóra kell állítania a túlcsordulást.
A kódnak ezt a részét egy JS függvényekkel rendelkező fájlba helyeztem el, plreloader1.js
Ha egy animált GIF-képből folyamatjelző sávot készít, az túl nehéznek bizonyulhat, néha még nagyobbnak is bizonyulhat, mint maga az oldal, ahol felkerült.
Ezért jobb, ha rajzol egy csíkot (például így), tedd a blokk hátterének ID-előtöltővel, és mozgasd a háttér pozícióját az időzítő szerint.
És a betöltés után ezt csináljuk:
A munka eredménye látható.
Ennek a módszernek vannak hátrányai - Ha az előtöltő elrejtését betöltésre állítja, pl. Amikor megvárod, amíg az összes kép betöltődik, a felhasználó azt gondolhatja, hogy az oldal egyszerűen lefagy – valójában semmi más nem történik, mint az animáció. Ha felakasztod a $(document).ready()-re a jQuery-ből, akkor a preloader eltűnése után csak a képek töltődnek be.
Ezért javasolt a...
2. számú módszer. Az igazság odakint van, különben a Jedik visszavágnak.
Először húzzunk 2 betöltési sávot - aktív és nem túl aktív.
Állítsuk be az inaktívat háttérnek, az aktívat pedig tegyük a div hátterévé, aminek a szélességét a terhelési százalék függvényében változtatjuk.
A Progbar_ph.gif egy kép 1 pixel magas és görgetősávunk szélessége (ez a példa hibás anélkül az IE-ben, és még nem találtam más módot a progressbar divs központosítására).
A stílusok megegyeznek az előző módszerrel, kivéve azt
Most már csak egy kis szkriptet kell készíteni, amely dinamikusan betölti a webhely tartalmát és képeit. Erre azért van szükség, hogy a folyamatjelző sáv megjelenjen és megváltozzon még a használt keretrendszer és más JS-fájlok letöltése előtt.
Vegyünk egy átlagos weboldalt, amely teljes egészében AJAX-on készült. A betöltés nagyjából így megy:
- A HTML kód betöltődik
- kezdenek betölteni a képek
- majd valami keret
- további JS-fájlok (bár jobb, ha mindent egybe egyesít)
- egy bizonyos funkció (vagy több) elindul, amely további tartalmat von be.
2 módszert implementáltam - az első egyszerű, így kapcsol be:
mielőtt írnánk:
dLoader.start("progbarfg" , 333, "count" );
Az első paraméter annak a blokknak az azonosítója, ahol az aktív betöltési sáv a háttér, a második a kép szélessége, a harmadik paraméter pedig az a módszer, amellyel a tartalom súlyát kiszámoljuk.
A szkript beolvassa az összes képet az oldalakra, és 1-es súlyt rendel hozzájuk. Az összes JS-fájl a törzsébe van írva, amint azt alább elmondom.
Szeretném azonban, ha az egyes tartalmak súlya nem csak egy lenne, hanem egy valós kötet bájtban. AJAX alkalmazásoknál pedig az összes grafikát egyszerre szeretném betölteni.
Ehhez PHP-ben írtam egy scriptet, ami beszkennel egy mappát a tervképekkel, és az egészet fájlméretekkel egy tömbbe rakja, opcionálisan tömörítve.
Tehát a következőket magunk elé téve egy folyamatjelző sávot kapunk, ami megmutatja az oldal összes tartalom betöltésének menetét, ami után simán eltűnik.
Az összes JS-fájl betöltése után elindulnak az invoke tömbben található funkciók. Ha a jQuery segítségével töltünk be tartalmat, a függvény így fog kinézni:
A PHP szkript a következőket teszi: egy tömbbe beírja a szükséges szkripteket méretükkel, valamint a képeket és a kiegészítő függvényeket. Kód:
Az összes kép és JS fájl betöltése után az onLoad esemény meghívásra kerül, amelyet a dLoader.start() függvényben adott meg.
A betöltési folyamat testreszabására is van mód.
Ebben a leckében azt nézzük meg, hogyan állíthatjuk be az oldal elemeinek előtöltőbetöltési arányát. Itt fogunk dolgozni a jQuery-vel, megismerkedünk a módszereivel, megtanuljuk a ciklusok működését, és létrehozzuk a saját funkciónkat, amely bizonyos műveleteket hajt végre.
Az előtöltő létrehozásának szakaszaiNézzük meg az oldalon található képek teljes számát, nézzük meg a százalékos arányt, mennyit szánnak az egyes képekre, töltsük ki a folyamatjelző sávot egy ciklusban, amíg az összes kép meg nem jelenik az oldalon, és végül 100%-os betöltéssel jelenítsük meg a teljes képet. oldalt, és rejtse el az előtöltőt.
Ez lesz ennek a forgatókönyvnek az általános koncepciója.
Vigyük át az összes fájlt a fejlesztői környezetünkbe, indítsuk el az Indexet, nyissuk meg a böngészőkonzolt, és nézzük meg, hogyan töltődnek be a képek, a gyorsítótárazás engedélyezésével és anélkül is.
Ha a gyorsítótár ki van kapcsolva, képeket kapunk, de a folyamatjelző továbbra is működik. Ha 3G-n hajtjuk végre a throttolást, akkor itt minden megváltozik, a képek még nem töltődnek be, de a folyamatjelző sáv 100%-ban megtelt és megvárja, amíg betöltődik az oldal.
Ennek oka az előtöltő betöltési ideje és a manuálisan beállított százalékos arány, ezekkel a paraméterekkel kell dolgoznunk.
Mivel megváltoztatjuk a script logikáját, ezért nem kell alul meghívnunk, mert most először a folyamatjelző sávot kell betölteni, az összes fájlkapcsolatot áthelyezzük a head-be.
Változók inicializálása
Visszatérünk a szkripthez, és felül számos változót inicializálunk.
A legfelülre mozgatjuk a preloader = $("#preloader") változót, aminek segítségével elrejtjük ezt az azonosítót. Kicsit később használjuk.
Preloader = $("#preloader"), // előbetöltő választó
A kód többi része kommentálható vagy törölhető, már nem lesz rá szükségünk.
// $(window).on("load", function () ( // $preloader.delay(1800).fadeOut("lassú"); // ));
A jQuery könyvtárat használjuk a képobjektumok eléréséhez. Használjuk a hossz függvényt, hogy megtudjuk, hány kép van az oldalon, és a kapott eredményt helyezzük az imagesCount változóba.
ImagesCount = $("img").hosszúság, // képek száma
Az alábbiakban ellenőrizzük és megjelenítjük ezt az eredményt a konzolon.
Console.log(imagesCount);
És így, most már tudjuk, hány grafikus kép található az oldalon. Ezután kiszámíthatja az egy képhez hozzárendelt százalékok számát.
A 100-at elosztjuk a képek számával, és a kapott eredményt egy változóba tesszük. Az ellenőrzéshez azonnal megjelenítjük a konzolon.
Százalék = 100 / imagesCount; //mennyiség % képkonzolonként.log(százalék);
Most már tudjuk a betöltési százalék paramétert, azt, hogy mekkora előrehaladást kell kitöltenünk a szkript futtatásakor, és mennyi százalék van az egyes képekhez hozzárendelve.
A 100-as paraméterekben a függvény meghívásakor regisztrálunk egy változót a képenkénti százalékok számával és a betöltési sebességet 1000-re változtatjuk, így a folyamatjelző sáv gyorsabban tölti be a kezdeti százalékokat.
)).circularProgress("animate", százalék, 1000);
Képek klónozása hurokbanMost a következő feladat, hogy minden képről készítsünk egy másolatot, ahol minden klónnál meghívjuk a folyamatjelző indítás funkcióját, a hívás során pedig elindítjuk a folyamatjelző sávot, amelyben minden képre betöltjük a hozzá rendelt százalékot. , ezáltal teljesen kitölti az előrehaladást a végpontig.
Ehhez létrehozunk egy ciklust, ahol I egy számlálóváltozó, majd írunk egy feltételt, míg I kisebb, mint a képek száma, addig a számlálót egy var i = 0-val növeljük; én< imagesCount; i++ , и в скобках выполнять следующие действия.
Létrehozunk egy változót, amelybe elhelyezzük az Image objektum egy példányát (vagyis egy képet), majd elkészítjük az src másolatát.
A böngésző lehetővé teszi a külső erőforrások - szkriptek, képek - betöltésének nyomon követését egy esemény segítségével, ha a betöltés során hiba történik.
A következő sor az onload esemény segítségével hívja meg a függvényt, amiben elindítja a folyamatjelző sávot, ezt egy kicsit később írjuk le.
A második sorban pedig az onror eseményt hívjuk, ha hirtelen hiba történt: a kép nem töltődött be.
For (i változó = 0; i< imagesCount; i++){ // создаем клон изображений var img_copy = new Image(); img_copy.src = document.images[i].src; img_copy.onload = img_load; img_copy.onerror = img_load; }
Az alábbiakban leírunk egy függvényt, amely elindítja az előtöltőt, és hozzáad egy százalékot. Írja be az img_load() függvényt, hogy hozzáadja az általunk ismert százalékot a betöltési folyamathoz. Ehhez hozzon létre egy másik, nulla értékű változót, nevezze progressnek.
Haladás = 0; // kiindulópont
Ezután létrehozunk egy másik változót loadedImg néven nulla értékkel. Ez egy számláló is lesz, amellyel összehasonlítjuk a klónozott képek számával.
LoadedImg = 0, // képbetöltési számláló
Visszatérünk a függvényhez, a hozzáadások előrehaladását += százalékban végezzük a nutria-ban, és elmentjük az eredményt folyamatban. A második sorban a loadedImg++ számlálót eggyel növeljük.
Ezután írunk egy feltételt, ha a haladás nagyobb vagy egyenlő, mint 100 (ahol 100 a százalékok teljes száma), vagy a loadedImg számláló egyenlő a betöltött képek számával imagesCount , akkor törölheti a folyamatjelző preloader.delay (400).fadeOut("lassú"); , egyébként előhívjuk a folyamatjelző sávot, ahol növeljük a haladást, és csökkentjük a betöltési sebességet 500-ra.
Függvény img_load() ( haladás += százalék; loadedImg++; if (progress >= 100 || loadedImg == imagesCount)( preloader.delay(400).fadeOut("slow"); qBody.css("túlcsordulás", "" ); ) $(".dws-progress-bar").circularProgress("animate", progress, 500); )
A konzol segítségével nézzük meg, hogyan jönnek létre az új képobjektumok.
Console.log(img_copy); console.log(img_copy.src);
Azt látjuk, hogy öt képklón létrehozása sikeresen megtörtént, mindegyikhez tartozik hivatkozás, nincs hiba, a funkció sikeresen feldolgozásra került.
Előtöltő eltávolításaMost távolítsuk el a jobb oldali görgetést lefelé, hogy az előtöltő betöltésekor ne tudjunk görgetni az oldalt, mint most.
Ehhez mindent egy feltételbe csomagolunk: ha a képek száma nagyobb, mint nulla imagesCount > 0, akkor ezt a szkriptet hajtjuk végre, ellenkező esetben töröljük a preloader.remove(); . Ha a feltétel teljesült, adjon hozzá egy fekete hátteret az előtöltőhöz preloader.css("background", "#000"); , és a css-ben eltávolítjuk ezt a stílust.
If (imagesCount >= imgSum && imagesCount > 0) ( preloader.css("background", "#000"); ) else ( preloader.remove(); )
Inicializálunk egy másik változót, amelyben a választót qBody = $("body") helyezzük el, és a feltételben megadunk egy scroll zárolást a törzsválasztóhoz qBody.css("overflow", "hidden"); .
QBody.css("túlcsordulás", "rejtett");
Most fel kell oldanunk a görgetés blokkolását, ehhez amikor töröljük az előtöltőt, akkor a törzsnél töröljük a blokkolást qBody.css("overflow", ""); .
QBody.css("túlcsordulás", "");
Eltávolítjuk a szolgáltatási információ kimenetét a konzolban, és elmentjük.
Elvileg kész az előtöltő, de nem mindig lesz érdekes számunkra egy-két képpel elindítani az oldalon. Hogy ne hívjuk meg újra, adjunk hozzá egy változót, nevezzük imgSum-nak, és tegyük bele az imgSum = 3 értéket; .
Tegyük hozzá a feltételhez, hogy ha a képek száma nagyobb vagy egyenlő, mint a változónk (imagesCount >= imgSum && imagesCount > 0), akkor teljesítjük a feltételt, ellenkező esetben töröljük az előtöltőt. Így ezzel az imgSum változóval beállíthatjuk az előtöltő betöltését bizonyos számú képhez.
Amikor a folyamatjelző gyorsan működik, százalékunk 100 fölé ugrik, azonnal javítsuk ki. Nyissa meg a plugin.js fájlt, keresse meg benne, hogy hol keletkezik a százalék, és először adja hozzá a következő feltételt, ellenőrizze a százalékos értéket, ha nagyobb, mint 100, majd adja vissza a 100-at, ellenkező esetben hagyja változatlanul.
global_settings.percent = (global_settings.percent > 100) ? 100: global_settings.percent;
Adjunk hozzá még néhány képet, nézzük meg, hogyan fog viselkedni az előtöltő sok közülük, és egyúttal ellenőrizzük a további beállításokat.
Ezzel a megjegyzéssel zárom a leckét, ha érdekel, feltétlenül oszd meg barátaiddal.
A leckét Denis Gorelov készítette fel.
A Savefrom net beépülő modul jellemzői a Yandex böngészőhöz, miért nem tölt le fájlokat a savefrom net alkalmazás
Nélkülözhetetlen program a számítógép távoli vezérléséhez - TeamViewer Távoli hozzáférésű teamweaver letöltése
A fórummotor automatikus észlelése Óvatosan powered by smf
A stílusok színe többféleképpen adható meg: hexadecimális értékkel, név szerint, RGB, RGBA, HSL, HSLA formátumban
A szervizes személyes fiókja
Az OJSC Severstal elektronikus kereskedési platformja Személyes számla sap severstal
A keresőoptimalizálás első lépései Simple Machines Forum: szerzői jogi és külső hivatkozások eltávolítása Személyes index php téma powered by smf