Všetky komentáre k príspevku "Prednačítanie obrázkov - príklad prednačítania obrázkov v HTML, JavaScript". Predbežné načítanie obrázkov pomocou css

Pre hru musíte vopred načítať 12 obrázkov a tieto obrázky sa môžu líšiť prípad od prípadu. To znamená, že teraz potrebujem načítať jeden 12 obrázkov (SVG) a zajtra budem potrebovať ďalších 12. Preto možnosť umiestniť ich do

nie je vhodné, pretože v tomto prípade budete musieť neustále načítavať všetky obrázky a ja ich budem potrebovať len 12. Preto sa pred spustením hry rozhodlo načítať ich pomocou JavaScriptu. Na tento účel som implementoval malú triedu „AssetsPreloader“, ktorá má zatiaľ jedinú metódu „preload“, ktorá berie pole objektov vo forme (src: „link“, id: „id“) a načítava potrebné obrázky jednoduchým vytvorením inštancie triedy Image () (native).

Class AssetsPreloader (statické predbežné načítanie (arr) (arr.map ((a) => (nech img = nový obrázok (); img.src = a.src; img.id = a.id; (toto. aktíva = toto. aktíva ||) .push (img);));))

Všetky načítané obrázky skončia vo vlastnosti statických aktív tejto triedy.

Ďalej v kóde je vykreslenie prvej snímky hry, kde sa tieto obrázky už používajú. A vo všeobecnosti je problém v tom, že vykresľovanie neprebieha. Spustenie kódu ho dosiahne, skontroloval som to a potom sa kód vykoná, ale samotné obrázky sa nevykreslia. Pokiaľ som pochopil, stáva sa to preto, že obrázky sa nestihnú načítať (aj keď sú načítané z disku). Ak však požiadate o nakreslenie prvého rámca priamo z konzoly prehliadača, potom všetko funguje ako má a rám sa nakreslí normálne.

Celý kód vo všeobecnosti vyzerá asi takto:

Class AssetsPreloader (statické predbežné načítanie (arr) (arr.map ((a) => (nech img = nový obrázok (); img.src = a.src; img.id = a.id; (toto. aktíva = toto. aktíva ||) .push (img); this.done = true;));)) AssetsPreloader.preload ([(src: "images / image.svg", id: "id_of_image"), ...]); // ... GAME.field.draw ();

Výsledkom je otázka, ako načítať obrázky (a vo všeobecnosti rôzne druhy súborov) čo najsprávnejšie, aby sa kód až do ich načítania ďalej nespúšťal. Navyše je možné, že v tejto chvíli bude na obrazovke nejaký indikátor priebehu (to znamená, že skript by tiež nemal úplne zamrznúť). Prvá vec, ktorá ma napadla, bolo pridanie celého zvyšku kódu do spätného volania metódy predbežného načítania (), ale tento nápad nebol úspešný.

Prosím o pomoc. Zaujímate sa nielen o to, ako, ale aj o ten najsprávnejší spôsob (best-practice, to všetko).

P.S. Súbor skriptu je prepojený so stránkou s atribútom odložiť. Pri použití napríklad async sa vykresľovanie buď stane, alebo nie (neviem povedať, od čoho to závisí). A do samotného kódu nechcem vešať handlery na kontrolu načítania stránky, pripravenosti DOM alebo niečo podobné.

Od autora: Vyzerá to tak, že načítavanie obrázkov je buď úplne prehliadané, alebo outsourcované na zbytočne veľké pluginy. Krásne, plynulé a rýchle načítanie webových stránok je nevyhnutnou súčasťou dobrej používateľskej skúsenosti, ako aj základnou zdvorilosťou voči vášmu dizajnérovi. Kto chce vidieť, ako je jeho dizajn narušený pomalým načítavaním obrázkov riadok po riadku zakaždým, keď vstúpi na stránku?

Veľa stránok, na ktorých pracujem, je silne preťažených fotografiou a výhody vysokorýchlostného internetu kompenzuje potreba poskytovať obsah sietnice s ultra vysokým rozlíšením pre stále rastúci počet zariadení. Toto je ideálny čas prevziať opraty a začať kontrolovať nahrávanie obrázkov a v tomto článku vám ukážem štyri jednoduché metódy, vďaka ktorým bude váš web vyzerať skvele a zvýši sa jeho produktivita.

Vždy, keď vidím, ako sa obrázok pomaly načítava, spomeniem si na túto klasickú scénu s chlapíkom z komiksu.

1. Načítanie každého obrázka samostatne (Single-Asset)

Toto je technika, ktorú môžete použiť na ktorýkoľvek alebo všetky obrázky na svojej stránke, aby ste zabránili (alebo aspoň skryli) tradičné načítanie základných JPG po riadkoch. Začneme zabalením každého obrázka do div s triedou img_wrapper:

< div class = "img_wrapper" > < img src = "comicbookguy.jpg" alt = "" / > < / div >

Tento obal nám poskytne určitú dodatočnú kontrolu nad veľkosťou a pomerom strán našich obrázkov, ktorú jednoduchá značka img nemôže zaručiť. Umožní tiež použiť načítavací prvok – buď ako obrázok na pozadí alebo ako samostatný prvok – ktorý možno po dokončení načítania obrázka skryť.

V tomto príklade obmedzíme náš obrázok na pomer strán 4: 3 – čo je veľmi dôležité pre responzívne stránky. Všimnite si, že sme obrázok skryli aj s nepriehľadnosťou: 0; čo nám dáva kontrolu nad tým, ako a kedy ho vidíme, keď ho chceme.

Img_wrapper (pozícia: relatívna; padding-top: 75 %; pretečenie: skryté;) .img_wrapper img (pozícia: absolútna; horná časť: 0; šírka: 100 %; nepriehľadnosť: 0;)

Img_wrapper ( poloha: relatívna; výplň - vrch: 75 %; prepad: skrytý; Img_wrapper img ( pozícia: absolútna; hore: 0; šírka: 100 %; nepriehľadnosť: 0;

Každý obrázok v DOM spustí udalosť načítania, keď sa všetky jeho údaje načítajú zo servera a samotný obrázok sa zobrazí v prehliadači. Na zachytenie a spojenie tejto udalosti budeme musieť použiť JavaScript. Začnem pridaním atribútu onload k značke obrázka.

< div > < img src = "comicbookguy.jpg" alt = "" onload = "imgLoaded(this)" / > < / div >

Pre nováčikov, ktorí nikdy nič podobné nevideli, sa to nazýva atribút inline skriptu a umožňuje nám spojiť funkčnosť JavaScriptu priamo s udalosťami spustenými z prvkov DOM, podobne ako prvky štýlu priamo pomocou atribútu inline style. Verte tomu alebo nie, v začiatkoch webu boli tieto atribúty vnoreného skriptu významnou súčasťou písania JavaScriptu a podobne ako inline štýly ich dnes bojovníci za čistotu a sémantiku odmietajú.

Takže pre tých z vás, ktorí sú znechutení vloženým JavaScriptom a chystajú sa spustiť, nájdite si chvíľku a vezmite na to moje slovo, stále je to jediná najefektívnejšia a najspoľahlivejšia metóda na zachytenie udalosti načítania obrázka v DOM. Aj keď som úplne za pokrok a HTML5, nemám absolútne nič proti používaniu techník starej školy, pokiaľ sú elegantné a funkčné.

Alternatívou k tomu je individuálne naviazať udalosť načítania ku každému obrázku v pripravenom dokumente. Problém však nastáva, keď sa obrázky načítajú ešte pred spustením prípravy dokumentu a predtým, ako dokážeme naviazať funkčnosť na udalosť načítania každého obrázka. Samostatným problémom je, keď sú obrázky už uložené vo vyrovnávacej pamäti prehliadača z predchádzajúcej relácie a sú načítané okamžite. Chýba nám udalosť a naša funkcia nie je volaná. Atribút onload tento problém nemá, pretože je takpovediac „vopred viazaný“ na udalosť, a preto sa spracuje, keď prehliadač analyzuje kód HTML.

Nemám absolútne nič proti používaniu old school trikov, pokiaľ sú elegantné a funkčné..

S pridaným atribútom onload sa pri načítaní obrázka zavolá funkcia imgLoaded (). Musí byť umiestnený v súbore javascript v hlavičke samotnej stránky (po jQuery, ak ho používate vo svojej funkcii, a po akýchkoľvek iných pluginoch), aby sa skompiloval pred analýzou tela a načítaním obrázkov. Ak vložíte funkciu na koniec stránky, je vysoká pravdepodobnosť, že sa obrázky začnú načítavať skôr, ako bude funkcia definovaná.

Pomocou kľúčového slova this môžeme odovzdať nespracovaný objekt DOM našej funkcii JavaScript ako argument:

function imgLoaded (img) (var $ img = $ (img); $ img.parent (). addClass ("načítané"););

funkcia imgLoaded (img) ( var $ img = $ (img); $ img. rodič (). addClass ("načítané");

Alebo s obyčajným JavaScriptom:

function imgLoaded (img) (var imgWrapper = img.parentNode; imgWrapper.className + = imgWrapper.className? "loaded": "loaded";);

funkcia imgLoaded (img) ( var imgWrapper = obr. parentNode; imgWrapper. className + = imgWrapper. className? "loaded": "loaded";

Pomocou javascriptu môžete rýchlo vylepšiť DOM o jednu úroveň a pridať načítanú triedu do prvku obalu, ktorý obsahuje. Určite mi dáte za pravdu, že ide o prekvapivo elegantné riešenie. Po selektívnom naštylovaní tejto triedy môžete teraz zobraziť načítaný obrázok nastavením jeho nepriehľadnosti na 1:

Img_wrapper.loaded img (nepriehľadnosť: 1;)

Img_wrapper. načítaný obrázok ( nepriehľadnosť: 1;

Aby veci fungovali hladko, pridáme do img niekoľko prechodov CSS3 a dosiahneme efekt „vyblednutia“ pri načítaní nášho obrázka.

Img_wrapper img (pozícia: absolútna; horná časť: 0; šírka: 100 %; nepriehľadnosť: 0; -webkit-transition: nepriehľadnosť 150 ms; -moz-transition: nepriehľadnosť 150 ms; -ms-transition: nepriehľadnosť 150 ms; prechod: nepriehľadnosť) 150 ms;

Img_wrapper img ( pozícia: absolútna; hore: 0; šírka: 100 %; nepriehľadnosť: 0; Webkit - prechod: nepriehľadnosť 150 ms; Moz - prechod: nepriehľadnosť 150 ms; Ms - prechod: nepriehľadnosť 150 ms; prechod: nepriehľadnosť 150 ms;

Pozrite si pracovný príklad na stránke codepen.io vrátane alternatívnej verzie s displejom načítavania.

Progresívne JPG

Ako poznámku k tejto technike a v reakcii na niektoré ohlasy, ktoré som na tento článok dostal, určite stoja za zmienku „progresívne“ JPG. Toto je ďalšia dlhotrvajúca technika z 90. rokov, ktorá zahŕňa udržiavanie JPG „progresívnych“ a nie „bežných“, aby sa zabránilo načítavaniu riadkov po riadkoch – namiesto toho vykresľovanie po jednotlivých snímkach v rovnakej výške, v akej sa načítavajú. Hlavnou výhodou tejto techniky je, že zabraňuje preskakovaniu prichádzajúceho obsahu po stránke pri načítaní obrázkov.

To, či sú efekty ako načítavanie a miznutie spinnerov otravné, je vecou osobného vkusu, ale v zásade trik wrapping div rieši tieto problémy s minimom CSS a JavaScriptu..

Najlepšie na technike wrapping div je, že sa nemusíte starať o výšku svojich obrázkov pri načítavaní a nemusíte svojich používateľov odsudzovať na škaredé zoskupovanie pixelov, ktoré podľa mňa môže byť tak zlé pre používateľa. Rovnako otravné ako bežné sťahovanie. Navyše to nič nestojí – proces opakovaného zobrazenia výkresu viackrát v skutočnosti predstavuje ďalšiu záťaž pre mobilné zariadenia s nízkou spotrebou. Či sú alebo nie sú otravné efekty, ako je načítanie a miznutie spinnerov, je vecou osobného vkusu, ale v zásade trik wrapping div rieši tieto problémy s minimom CSS a JavaScriptu a nie je potrebné sa spoliehať na používateľa (v CMS situácii) pri ukladaní JPG určitým spôsobom.

2. Hromadné odovzdanie viacerých obrázkov

Vyššie uvedená technika je veľmi dobrá pre jednotlivé obrázky, ale čo ak máme výber obrázkov na zobrazenie v karuseli alebo prezentácii, alebo ak používame značkovací doplnok, ako je Masonry? Bežnou chybou pri používaní doplnkov karuselu / posuvníka je ich spracovanie, keď je dokument pripravený, často ešte pred načítaním všetkých obrázkov. To môže spôsobiť prechod prezentácie na prázdny, ešte nenačítaný obrázok, najmä ak máme do činenia s fotografiami s vysokým rozlíšením a veľkými súbormi.

Aby ste tomuto javu predišli, musíte preferovaný plugin spracovať až po načítaní všetkých potrebných obrázkov. Použitím variácie vyššie uvedenej techniky opäť pridáme atribút onload ku všetkým obrázkom v našej prezentácii:

Poznámka: Nižšie uvedené označenie je poskytnuté iba ako zjednodušený vzorový doplnok pre prezentáciu a malo by byť prispôsobené vašim potrebám.

< div id = "Slideshow" > < img src = "slide_1.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_2.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_3.jpg" alt = "" onload = "slideLoaded(this)" / > < / div >

V JavaScripte použijeme funkciu slideLoaded () na sledovanie procesu načítania obrázkov a spracujeme náš doplnok, keď bude pripravený:

funkcia slideLoaded (img) (var $ img = $ (img), $ slideWrapper = $ img.parent (), celkom = $ slideWrapper.find ("img"). dĺžka, percentLoaded = null; $ img.addClass ("načítané" "); var načítaný = $ slideWrapper.find (". načítaný "). dĺžka; if (načítaný == celkom) (percentoNaložený = 100; // INICIALIZÁCIA DOPLNKU $ slideWrapper.easyFader ();) else (// SLEDUJTE PROCESS percentLoaded = načítané / celkom * 100;););

funkcia slideLoaded (img) ( var $ img = $ (img), $ slideWrapper = $ img. rodič (), celkom = $ slideWrapper. nájsť ("img"). dĺžka, percentLoaded = null; $ img. addClass ("načítané"); var load = $ slideWrapper. nájsť ("načítané"). dĺžka; if (naložené == celkom) ( percentLoaded = 100; // INICIALIZUJTE PLUGIN $ slideWrapper. easyFader (); ) inak ( // SLEDUJTE PROCES percentLoaded = načítané / celkom * 100;

Zakaždým, keď načítame materiál, pridáme k nemu načítanú triedu, aby sme mali prehľad o jeho pokroku.
Pomocou posledného if inicializujeme plugin (v tomto prípade jQuery EasyFader), keď sa počet obrázkov s načítanou triedou rovná celkovému počtu obrázkov v kontajneri. Ako ďalšiu vlastnosť môžete rozdeliť načítanú premennú na celkovú premennú a použiť ju na vizualizáciu priebehu pre používateľov, a to buď zobrazením percent, alebo pomocou nej na ovládanie šírky indikátora priebehu alebo niečo podobné.

Opäť platí, že tento skript by mal byť umiestnený v hlavičke vášho dokumentu po jQuery a akomkoľvek doplnku, ktorý spracujete, keď budete pripravený.

3. Predbežné ukladanie obrázkov do vyrovnávacej pamäte pre výkon

Na stránkach s množstvom obrázkov je možné mierne znížiť zaťaženie pri nahrávaní obrázkov načítaním obrázkov na pozadí do vyrovnávacej pamäte prehliadača, kým používateľ prehliada stránku.

Povedzme napríklad, že mám viacstránkový web, kde má každá sekundárna stránka v hornej časti obrázok vo vysokom rozlíšení. Namiesto toho, aby používateľ čakal, kým sa všetky tieto obrázky načítajú zakaždým, keď prejde na samostatnú stránku, je možné ich načítať do vyrovnávacej pamäte ešte predtým, ako používateľ na stránku príde. Začnime umiestnením ich adries URL do poľa:

Typicky by som použil svoj CMS alebo akýkoľvek backend, na ktorom staviam stránku, aby som tieto údaje odovzdal samotnej stránke vo forme značky skriptu v päte. Zoznam obrázkov tak možno dynamicky aktualizovať a rozširovať.

Keď používateľ navštívi domovskú stránku mojej stránky, počkám, kým sa úplne načíta, a až potom urobím čokoľvek, aby som sa uistil, že nepreruším načítanie obsahu samotnej stránky pridaním načítania tretej strany. Aby som to mohol urobiť, pripojím funkciu JavaScript k udalosti načítania okna, ktorá sa spustí iba vtedy, keď už bol načítaný a vykreslený všetok obsah stránky (vrátane obrázkov), na rozdiel od udalosti ready document, ktorá sa spustí hneď, ako je DOM pripravený:

function preCacheHeros () ($ .each (heroArray, function () (var img = new Image (); img.src = this;));); $ (okno) .load (funkcia () (preCacheHeros ();));

funkcia preCacheHeros () ( $. každý (heroArray, funkcia () ( var img = nový obrázok (); img. src = toto; } ) ; $ (okno). zaťaženie (funkcia () ( preCacheHeros (); } ) ;

Alebo s obyčajným JavaScriptom:

funkcia preCacheHeros () (pre (i = 0; i< heroArray.length; i++){ var url = heroArray[i], img = new Image(); img.src = url; }; }; window.onload = preCacheHeros();

funkcia preCacheHeros () ( pre (i = 0; i< heroArray . length ; i ++ ) { var url = heroArray [i], img = nový obrázok (); img. src = url; okno. onload = preCacheHeros ();

Prechádzame cez pole heroArray, pričom v každej iterácii vytvoríme prázdny objekt obrázka a potom nastavíme adresu URL pre atribút src nášho obrázka. Obrázok sa teda načíta do vyrovnávacej pamäte prehliadača pre aktuálnu reláciu, takže keď používateľ skutočne navštívi stránku, na ktorej je obrázok prezentovaný, okamžite sa zobrazí.

Bohužiaľ, zatiaľ čo prax predbežného ukladania do vyrovnávacej pamäte urýchľuje sťahovanie a zlepšuje používateľskú skúsenosť na strane klienta, v skutočnosti zvyšuje zaťaženie servera. V takom prípade má zmysel zvážiť analýzu vašich stránok pred vykonaním predbežného ukladania do vyrovnávacej pamäte. Ak väčšina vašich používateľov navštívi domovskú stránku vašej lokality a odíde pred návštevou sekundárnych stránok, náklady na dodatočné požiadavky na váš server môžu prevážiť nad výhodami, ktoré zostávajú pre týchto niekoľko používateľov.

Pred implementáciou predbežného ukladania do vyrovnávacej pamäte má zmysel zvážiť analýzu vašich stránok

Prekognitívne predbežné ukladanie do vyrovnávacej pamäte

Ak však chcete pre-caching naozaj využiť, odporúčam obrázky preň rozdeliť do zmysluplných skupín strategicky umiestnených na stránke. Napríklad, keď viem, že veľká väčšina používateľov, ktorí zostávajú na stránke, prejde po návšteve domovskej stránky na sekundárnu stránku, predbežne by som uložil obrázky primárnej sekundárnej stránky, kým sú na domovskej stránke.

Predstavme si však, že každý môj blogový príspevok má aj obrázok vo vysokom rozlíšení. Ich predbežné ukladanie do vyrovnávacej pamäte, keď je návštevník na domovskej stránke, zasiahne nielen stranu servera, ale môže predstavovať plytvanie zdrojmi, pretože napríklad iba 15 % používateľov navštevujúcich domovskú stránku navštívi blogový príspevok. Najlepším miestom na predbežné ukladanie obrázkov blogu do vyrovnávacej pamäte môže byť vstupná stránka, ak viete, že takmer všetci používatelia z nej prejdú na blogový príspevok.

Toto je známe ako prediktívne predbežné ukladanie do vyrovnávacej pamäte, pri ktorom používame štatistiky z našej analýzy na predpovedanie vzorcov správania pohybu našich používateľov po stránke. Môže to znieť trochu fantasticky, ale budete prekvapení, ako presne dokážete predpovedať tok návštevníkov a premeniť ho na svoju (a používateľov) výhodu.

Môže to znieť trochu fantasticky, ale budete prekvapení, ako presne viete predpovedať tok návštevníkov.

4. "Lenivé" načítanie obrazu na zníženie zaťaženia servera

Lazy-loading označuje obrázky, ktoré sa načítajú programovo po špeciálnej udalosti, aby sa zabránilo prehliadaču vyžiadať a zobraziť všetky obrázky na stránke hneď po načítaní dokumentu.

Používa sa hlavne na dlhých alebo obrázkoch náročných stránkach. Na vstupnej stránke blogu Barrel kombinujeme lenivé načítanie s doplnkom MixItUp, aby sme zabezpečili, že obrázky, ktoré nie sú v aktuálnom filtri alebo stránke, sa zbytočne nenačítajú, kým nebude prvok viditeľný. Všetky obrázky, ktoré sa majú lenivo načítať, budú opäť zabalené do div s triedou img_wrapper, ktorej bude pridelená trieda lazy_load, aby sme ich mohli jednoducho vybrať pomocou jQuery:

). zaťaženie (funkcia () (

lazyLoad ();

Vyššie uvedená funkcia „lenivo“ načíta všetky obrázky po spustení udalosti načítania okna, ale kód v slučke.each () možno prispôsobiť rôznym situáciám. Veľmi bežným použitím je pripojenie k udalosti posúvania okna a „lenivé“ načítanie obrázkov, keď sa posúvajú do výrezu.

Vpred na načítanie obrázkov

V procese experimentovania s niekoľkými týmito technikami na mnohých projektoch za posledných 12 mesiacov som ich musel skutočne orezať a vyleštiť, aby som ich mohol použiť v nedávno prerobenom projekte barrelny.com (vyšiel už v apríli), kde Použil som kombináciu všetkých štyroch, aby som zabezpečil ladné načítanie obrázkov a zároveň som sa snažil vyžmýkať každý kúsok výkonu z extrémne bohatej webovej stránky s fotografiami a obrázkami. Kombináciou predbežného ukladania do vyrovnávacej pamäte a pomalého načítavania s načítavaním stránky pomocou AJAX, prezentácií a stránkovania na strane klienta sme dokázali vytvoriť skvelý hladký zážitok pre celú stránku.

Pri pokuse vytlačiť tieto techniky na prezentáciu vývojového tímu Barrel som bol príjemne prekvapený, aké ľahké sú všetky tieto techniky na papieri – zvyčajne 5-10 riadkov kódu v jQuery – a ako ľahko sa dajú integrovať do akéhokoľvek projektu. Navyše, každý z nich môže byť napísaný v obyčajnom JavaScripte bez problémov a kódu navyše, ale ak používate jQuery, ako to často robíme my, určite by ste mali využiť jeho robustné techniky prechodu DOM.

Tieto techniky sú nepochybne jediným spôsobom, ako dosiahnuť svoju príslušnú funkčnosť, ale možno ich ľahko prispôsobiť existujúcim rámcom a doplnkom. Ak ste ešte neuvažovali o nahrávaní obrázkov, dúfam, že teraz budete! Prečo nepoužiť jeden alebo dva z nich vo svojom ďalšom projekte?

Prečo potrebujeme obrázky vopred načítať? Najčastejšie ho používame na kvalitné vykreslenie rozhraní, ovládacích prvkov stránok.

Príklad:

K dispozícii je skript galérie alebo textové bloky s možnosťou pohybu (do / z). Za ovládanie pohybu sú zodpovedné grafické šípky. Keď umiestnite kurzor myši na šípku, jej obrázok sa nahradí iným.
Čo robí prehliadač pri umiestnení kurzora myši? Pošle požiadavku na obrázok na server. Dokonca aj pri veľmi rýchlej odozve si všimnete „blikajúci“ efekt. Ak obrázky vopred načítate, nestane sa to.

Aplikácia

Tento prístup sa v modernom usporiadaní používa zriedka. Oveľa vhodnejšie je použiť CSS Sprites. Ale, ak nie je taká možnosť a naozaj ju potrebujete - vitajte pod mačkou.

Var imgPath = "/ tpl / obrázky /"; // cesta k adresáru s obrázkami // zoznam obrázkov var preloadImagesList = Array ("about_hover.jpg", "news_hover.jpg", "photo_hover.jpg", "video_hover.jpg", "contacts_hover.jpg"); / / / ************************************** / // funkcia predbežne načítať obrázky (obrázky) (pre (var i = 0; i< images.length; i++){ var image = images[i]; $("") .attr (" src ", imgPath + obrázok);) // for) // predbežné načítanie obrázkov / ******************************* * *** / // volanie funkcie $ (). pripravené (funkcia () (preloadImages (preloadImagesList);))

Pre hru musíte vopred načítať 12 obrázkov a tieto obrázky sa môžu líšiť prípad od prípadu. To znamená, že teraz potrebujem načítať jeden 12 obrázkov (SVG) a zajtra budem potrebovať ďalších 12. Preto možnosť umiestniť ich do

nie je vhodné, pretože v tomto prípade budete musieť neustále načítavať všetky obrázky a ja ich budem potrebovať len 12. Preto sa pred spustením hry rozhodlo načítať ich pomocou JavaScriptu. Na tento účel som implementoval malú triedu „AssetsPreloader“, ktorá má zatiaľ jedinú metódu „preload“, ktorá berie pole objektov vo forme (src: „link“, id: „id“) a načítava potrebné obrázky jednoduchým vytvorením inštancie triedy Image () (native).

Class AssetsPreloader (statické predbežné načítanie (arr) (arr.map ((a) => (nech img = nový obrázok (); img.src = a.src; img.id = a.id; (toto. aktíva = toto. aktíva ||) .push (img);));))

Všetky načítané obrázky skončia vo vlastnosti statických aktív tejto triedy.

Ďalej v kóde je vykreslenie prvej snímky hry, kde sa tieto obrázky už používajú. A vo všeobecnosti je problém v tom, že vykresľovanie neprebieha. Spustenie kódu ho dosiahne, skontroloval som to a potom sa kód vykoná, ale samotné obrázky sa nevykreslia. Pokiaľ som pochopil, stáva sa to preto, že obrázky sa nestihnú načítať (aj keď sú načítané z disku). Ak však požiadate o nakreslenie prvého rámca priamo z konzoly prehliadača, potom všetko funguje ako má a rám sa nakreslí normálne.

Celý kód vo všeobecnosti vyzerá asi takto:

Class AssetsPreloader (statické predbežné načítanie (arr) (arr.map ((a) => (nech img = nový obrázok (); img.src = a.src; img.id = a.id; (toto. aktíva = toto. aktíva ||) .push (img); this.done = true;));)) AssetsPreloader.preload ([(src: "images / image.svg", id: "id_of_image"), ...]); // ... GAME.field.draw ();

Výsledkom je otázka, ako načítať obrázky (a vo všeobecnosti rôzne druhy súborov) čo najsprávnejšie, aby sa kód až do ich načítania ďalej nespúšťal. Navyše je možné, že v tejto chvíli bude na obrazovke nejaký indikátor priebehu (to znamená, že skript by tiež nemal úplne zamrznúť). Prvá vec, ktorá ma napadla, bolo pridanie celého zvyšku kódu do spätného volania metódy predbežného načítania (), ale tento nápad nebol úspešný.

Prosím o pomoc. Zaujímate sa nielen o to, ako, ale aj o ten najsprávnejší spôsob (best-practice, to všetko).

P.S. Súbor skriptu je prepojený so stránkou s atribútom odložiť. Pri použití napríklad async sa vykresľovanie buď stane, alebo nie (neviem povedať, od čoho to závisí). A do samotného kódu nechcem vešať handlery na kontrolu načítania stránky, pripravenosti DOM alebo niečo podobné.

Keď robíte rozloženie a vytvárate najrôznejšie triky s obrázkami (zvyčajne s náhradou pri umiestnení kurzora myši alebo dokonca s ich animáciou), vždy sa objaví taká nuansa ako pomalé načítavanie obrázku / obrázku... Na prvý pohľad problém nie je až taký závažný a hneď ako sa obrázky načítajú, všetko funguje ako má, no tento prvý efekt vznášania, ktorý sa snaží obrázok načítať a zároveň nahradiť, vytvára taký trhavý efekt, ktorý často nevyzerá veľmi pekne a môže pokaziť prvý dojem používateľov vášho webu.

S animácie veci sú ešte horšie. Predstavte si napríklad, že potrebujete do JS (JQuery) implementovať prechádzajúce auto, ktoré po 2 sekundách vystrieda autobus. Obrázky s autom a autobusom sú rôzne. Zároveň sa začnú načítavať až v momente, keď na ne prehliadač dostane odkaz s možnosťou načítania ( teda na začiatku animácie). Načítanie takéhoto obrázka bude trvať niekoľko sekúnd. To znamená, že sa ukáže, že polovica dvojsekundovej animácie načíta iba tento obrázok - toto nie je príkaz.

Ale to všetko sa dá opraviť predbežným načítaním ( predbežné zaťaženie) obrázky, čo umožňuje načítať obrázok do vyrovnávacej pamäte ihneď po načítaní hlavnej stránky ( alebo ešte predtým). To je to, o čom chcem hovoriť v tomto článku.

Predbežné načítanie obrázkov v jazyku JavaScript (JQuery)

Možnosť načítania JS sa mi javí ako jedna z najlepších, najmä ak sa zaoberáte animáciou. Jeho podstatou je, že jednoducho vytvoríte kópiu obrázka pomocou JavaScriptu a načítate ju do vyrovnávacej pamäte prehliadača, čím v prípade potreby už nebudete musieť načítať obrázok, pretože už bude predinštalovaný.

Znie to komplikovane? =) A vyzerá to ako tento kód, kde musíte nahradiť cestu k obrázku svojou vlastnou a všetko bude fungovať:

// vytvorte funkciu jQuery, ktorá načíta obrázky do vyrovnávacej pamäte jQuery.preloadImages = function () (for (var i = 0; i< arguments.length; i++) { jQuery("") .attr (" src ", argumenty [i]);)); // špecifikujte cestu k obrázku, ktorý je potrebné načítať $ .preloadImages (" / tpl / testimg.png ");

Ak potrebujete načítať niekoľko obrázkov, môžete ich jednoducho uviesť oddelené čiarkami, napríklad takto:

$ .preloadImages ("imageone.jpg", "dirname / imageok.jpg", "/tpl/testimg.png");

Môže byť ľubovoľný počet obrázkov. Hlavnou vecou je nezabudnúť na funkciu jQuery, bez ktorej nebude predbežné načítanie fungovať.

Tento spôsob má aj nevýhody, napríklad závisí od toho, či je v prehliadači používateľa povolený JS. Ale z osobnej skúsenosti poviem, že ak sa pozriete na tých, ktorí majú JS vypnuté, tak v moderných technológiách tvorby stránok toho veľa nezrealizujete. A myslím si, že takýchto používateľov nie je až tak veľa. Vo všeobecnosti sa treba rovnať väčšine a väčšina si prehliadač až do takej miery neprispôsobuje.

Osobne uprednostňujem použitie tohto spôsobu načítania v mnohých projektoch kvôli tomu, že je pohodlný na implementáciu.

Predbežné načítanie obrázkov pomocou nových funkcií HTML5

Táto metóda sa objavila relatívne nedávno, pretože samotná technológia HTML5 bola spustená nie tak dávno. Jeho podstatou je, že pridáte odkaz na obrázok prostredníctvom značky odkazu a v rel ( typ zaťaženého prvku) predpisujete, že ide o predpätie. Prehliadač teda vidí túto značku a automaticky načíta obrázok do schránky.

To sa dosiahne pridaním takejto značky do html kódu ( zmeňte iba odkaz na obrázok na svoj vlastný):

Tu rel obsahuje 2 parametre: predbežné vykreslenie- pre Jeho Veličenstvo Chróm a predvýber- pre iné prehliadače. Ak chcete načítať viac obrázkov, skopírujte značku a nahraďte odkaz toľkokrát, koľkokrát je to potrebné:

Výhodou tejto metódy je, že zakázanie JS nijakým spôsobom neovplyvní predbežné načítanie, ale osobne vidím 2 zjavné nevýhody:
1) Technológia HTML5, a teda táto metóda predbežného načítania, nie je podporovaná všetkými prehliadačmi. Teraz sa však prehliadače aktualizujú a väčšina moderných vyvíjajúcich sa prehliadačov rozpoznáva HTML5, ale stále to nie je ani zďaleka ideálne.
2) Ťažkopádnejší v porovnaní s implementáciou JS, pretože každý obrázok bude musieť byť popísaný samostatnou značkou ( a s rôznymi rel parametrami na dosiahnutie niečoho blízkeho kompatibilite medzi prehliadačmi).

Vo všeobecnosti si myslím, že táto metóda je sľubná, ale vyžaduje si čas. Teraz v ňom chýba mu všestrannosť.

Predbežné načítanie obrázkov v časovo overenom HTML

Úplne prvá myšlienka, ktorá zvyčajne prichádza na myseľ v čistom html, je vytvorenie bloku div s parametrom CSS "displej: žiadny;", je v ňom obrázok a toto by malo byť predpätie. V skutočnosti to nefunguje, prehliadač sa začne načítavať do vyrovnávacej pamäte až vtedy, keď je zobrazenie iné ako žiadne.

Ale prišiel som na spôsob pomocou CSS trikov. Poviem vám o tom viac.

Neviditeľné umiestnenie bloku prostredníctvom nepriehľadnosti a polohy CSS

CSS má takúto vlastnosť - nepriehľadnosť... Jeho účelom je zmeniť transparentnosť a môžete zmeniť transparentnosť až na nulu. Okrem toho existuje aj vlastnosť position v CSS, ktorá je potrebná na umiestnenie prvku na stránke ( môžete pixel po pixeli posúvať blok s informáciami kdekoľvek v rámci viditeľnosti stránky aj mimo nej). Toto všetko bude pre nás užitočné:

Získame tak neviditeľný blok s obrázkom, ktorý sa v skutočnosti nachádza mimo informácie viditeľné pre používateľa. Mimochodom, takéto umiestnenie mimo obrazovky sa často používa, ak chcú vytvoriť nejaký neviditeľný blok, často som videl, ako sú týmto spôsobom šité odkazy na bezplatné šablóny. tak ty vieš všetko =)

Ak chcete týmto spôsobom vopred načítať niekoľko obrázkov, stačí ich zadať v bloku div takto:

Toto sú metódy predbežného načítania obrázkov / obrázkov, ktoré možno použiť pri vývoji webových stránok. Ak máte ďalšie nápady, rád si ich prečítam v komentároch.
Veľa šťastia všetkým v rozložení a tvorbe animácií! =)