Előfeszítő képek - egy példa a pre-loading képek html, javascript, jegyzet

Ennek során elrendezés létrehozása és olyan trükköket képekkel (általában helyettesítési lebeg, vagy akár a animáció) mindig vspylyvaet ilyen árnyalatot, hogyan gátolta feltöltése képek / képek. Első pillantásra, a probléma nem olyan súlyos, és amint a képek betöltődnek, minden rendben van, de az első légpárnás hatás, ami igyekszik feltölteni egy képet, és cserélje ki egy időben, hozzon létre egy csúzli hatását úgy néz ki, elég gyakran nem túl szép, és tudja elrontani az első benyomás a webhely számára.

Az animáció még rosszabb. Képzeljük el például, meg kell tenni a JS (JQuery) proezzhayushuyu autók helyett 2 másodpercig busszal. Képek a gépről, és a különböző busz. Ezek azonban csak akkor lehet betölteni, amikor a böngésző megkapja őket azzal a képességgel, hogy összekapcsolja podgruzki (azaz az elején az animáció). A letöltés ezt kép néhány másodpercre van szükség. Ez azt jelenti, kiderül, hogy a fele a két másodperces animáció kép csak akkor betöltődik - ez nem egy parancs.

De mindez lehet korrigálni preload (előfeszítő) képeket, amely lehetővé teszi, hogy töltsön be egy képet a puffer azonnal betöltésekor a főoldalon (vagy előtt is). Ez az, amit szeretnék mondani, ebben a cikkben.

Úgy hangzik, nehéz? =) És úgy néz ki, mint ez a kódot, ahol szeretné cserélni az utat a kép rajta, és minden úgy fog működni:

Ha kell több képet tölthet egyszerűen felsorolni őket vesszővel elválasztva, például:

Képek lehet bármilyen számot. Fontos ne feledkezzünk meg a JQuery funkció nélkül előfeszítő nem működik.

Ez a módszer hátránya, mint az a tény, hogy ez attól függ, hogy a JS szerepel a felhasználó böngészőjének. De a személyes tapasztalatok azt mondanám, hogy ha megegyeznek a fogyatékos JS, akkor sok nem lesz képes végrehajtani a modern technológiák a helyszínre épületben. Igen, és az ilyen felhasználók számára, azt hiszem, nem annyira. Általában akkor kell a többség, és a többség nem kastomiziruet böngésző ennyiben.

Én személy szerint sok projekt szívesebben használják ezt így podgruzki annak a ténynek köszönhető, hogy ez könnyen megvalósítható.

Előfeszítő képek az új HTML5 vozmozhnestey

Ez a módszer viszonylag új keletű véve azt a tényt, hogy ő HTML5 technológia nemrég kezdték. Ennek lényege, hogy összekapcsolja a képet lepecsételt át a link tag, de a rel attribútumot (típus betölthető elem), meg kell írni, hogy az előfeszítő. Így a böngésző látja ezt a címkét, és automatikusan betölti a képet a vágólapra.

Ez úgy történik, hogy HTML-kód tag itt (link a kép rólam az ő):

Itt rel előírt paraméterek 2: Előmegjelenítés - Őfelsége Chrome és az előzetes letöltésre - a többi böngésző. Ha azt szeretnénk, hogy feltölt egy nagyobb képek száma, akkor másolja a címkét, és cserélje ki a linket, ahányszor:

Plusz ez a módszer, hogy ki JS nem befolyásolja a preload, de személy szerint látok két nyilvánvaló hátrányai:
1) HTML5 technológia, és így ez a módszer a előfeszítő nem minden böngésző támogatja. Most azonban a böngészők frissített és legmodernebb fejlődő böngészők felismerik a HTML5, de vseravno ez még mindig messze van az ideálistól.
2) Több gramozdky ellentétben JS végrehajtását, mert minden kép lesz, hogy leírja az adott tag (és a rel különböző paraméterekkel, ami valamit elérni, közel a cross-browser).

Általában azt hiszik, hogy ez a módszer ígéretes, de ez időt vesz igénybe. Most sokoldalúságot nélkülöz.

Pre-loading képek a bizonyított időben HTML

A legelső gondolat, ami eszébe jut általában a tiszta html -, hogy hozzon létre egy CSS div blokk paraméter „display: none;”. benne egy képet, és meg kell betöltődik. Tény, hogy ez nem működik, akkor a böngésző akkor a betöltés a puffer csak akkor, ha a kijelzőn eltérő lesz semmi.

De rájöttem, hogyan használjuk trükköket CSS. Megmondom többet róla.

Elhelyezése a láthatatlan egység révén CSS opacitás és helyzetét (pozicionálás)

A CSS egy tulajdonság - fényelnyelés. Az ő küldetése -, hogy módosítsa a átláthatóságot és módosíthatja a homály lehet akár a semmiből. Ezen túlmenően, a CSS is olyan helyzetben tulajdonság, hogy szeretne elhelyezni elemeket az oldalon (tudja mozgatni a készüléket pixelenként az információ nem számít, ha belül és kívül egyaránt az oldal láthatóságát). Mindez hasznos nekünk:

Így kapunk egy láthatatlan blokk c kép, amely szintén tulajdonképpen kívül helyezkedik el a látható információkat a felhasználó. Ebben a fajta elhelyezése kívül a képernyőn, az úton, gyakran használják, ha akarnak egy láthatatlan blokk, gyakran tekintik a varrott hivatkozás ingyenes sablonok ilyen módon. Tehát tudja, hogy minden =)

Ha azt szeretnénk, preload több kép Ily módon ezek elegendőek az egységár feltüntetésére a div, valahogy így:

Nagyon szeretném tudni, hogy mi a neve, és hogyan lehet kapcsolatba lépni Önnel. Ezeket az adatokat nem fog meg sok időt, és én leszek hálás érte!

Weboldal (nem kötelező):

A blogom automatikusan elfelejtette felhasználónevét / e-mail-en belül a jelenlegi böngésző. Ha szükséges, akkor mindig vissza.

Iratkozzon fel a blog

Akarsz az első tudni a legérdekesebb? Akkor iratkozzon fel hírlevelünkre.

A feliratkozással a hírlevélre, akkor mindig az első helyen, hogy megismerjék a legfontosabb és leghasznosabb a bloggerek és a webmesterek információkat.

Vagy nézni a híreket

Hozzon létre egy oldalon kell keresni az interneten, és nagyon is valóságos. És a blogomban segít ebben.