Când faci crearea de aspect și orice trucuri cu imagini (de obicei, cu Hover de substituție sau chiar animație lor) vspylyvaet întotdeauna o astfel de nuanță modului în care imaginile au inhibat încărcarea / imagini. La prima vedere, problema nu este atât de gravă și, de îndată ce imaginile sunt încărcate, totul funcționează bine, dar primul efect Hover, care încearcă să încarce o imagine și să o înlocuiască în același timp, de a crea un efect de praștie, care arata destul de des, nu foarte frumos și poate strica prima impresie a utilizatorilor site-ului.
Cu animația lucrurile sunt și mai rău. Imaginați-vă, de exemplu, că trebuie să implementați pe JS (JQuery) o mașină care trece, înlocuită în 2 secunde cu autobuzul. Imaginile cu mașina și cu autobuzul sunt diferite. În acest caz, acestea vor începe să se încarce numai în momentul în care browserul va primi un link către ele cu capacitatea de încărcare (adică la începutul animației). Va dura câteva secunde pentru a încărca o astfel de imagine. Adică, se pare că jumătate din animația de două secunde această imagine va fi încărcată doar - aceasta nu este ordine.
Dar toate acestea pot fi corectate prin preîncărcarea (preloading) imaginilor, ceea ce vă permite să încărcați imaginea în tampon imediat când pagina principală este încărcată (sau chiar înainte de aceasta). Vreau să spun despre acest lucru în acest articol.
Se pare complicat? =) Și seamănă exact cu acest cod, unde trebuie să înlocuiți calea spre imagine cu cea proprie și totul va funcționa:
Dacă trebuie să încărcați câteva imagini, puteți să le listați cu o virgulă, după cum urmează:
Fotografiile pot fi orice număr. Principalul lucru este să nu uitați de funcția JQuery, fără ca preîncărcarea să nu funcționeze.
Această metodă are dezavantaje, cum ar fi faptul că aceasta depinde de faptul dacă JS inclus în browserul utilizatorului. Dar, din experiența personală, voi spune că, dacă sunteți egal cu cei care au oprit JS, atunci în tehnologiile moderne de construcție a sitului nu se vor realiza multe. Și nu sunt atât de mulți utilizatori, cred. În general, trebuie să fie în majoritate, iar majoritatea nu kastomiziruet browser-ul în această măsură.
Eu personal prefer să folosesc această metodă de încărcare în multe proiecte, având în vedere faptul că este ușor de implementat.
Imagini pre-încărcate cu noi caracteristici HTML5
Această metodă a apărut relativ recent, având în vedere faptul că tehnologia HTML5 însăși a fost lansată nu cu mult timp în urmă. Esența lui este că ai pus un link spre imagine prin tag-ul de legătură, iar în atributul rel (tipul de element care este împins), vă prescrieți că aceasta este preload. Astfel, browserul vede această etichetă și încarcă automat imaginea în buffer.
Se face prin adăugarea la codul html a unei astfel de etichete (numai link-ul către imagine este schimbat în propria sa):
Aici în rel sunt scrise 2 parametri: prerender - pentru maiestatea sa Chrome și prefetch - pentru alte browsere. Dacă doriți să încărcați mai multe imagini, copiați eticheta și înlocuiți link-ul cu numărul necesar de ori:
Avantajul acestei metode este acela că dezactivarea JS nu afectează în niciun fel preîncărcarea, dar personal văd două dezavantaje evidente:
1) Tehnologia HTML5 și, prin urmare, acest mod de preîncărcare nu este acceptată de toate browserele. Acum, însă, browserele sunt actualizate și cele mai moderne browsere în curs de dezvoltare recunosc HTML5, dar acest lucru este încă departe de ideal.
2) Mai greoaie decât implementarea JS, pentru că trebuie să descrieți fiecare imagine cu o etichetă separată (și cu parametri relativi rel, pentru a obține ceva aproape de compatibilitatea cu browserul încrucișat).
În general, cred că această metodă este promițătoare, dar este nevoie de timp. Acum îi lipsește universalitatea.
Preîncărcarea imaginilor pe HTML testat în timp
Prima idee care vine de obicei în minte pe html pur este de a crea un bloc div cu parametrul CSS "display: none;". există o imagine în ea și aceasta ar trebui să devină preload. De fapt, acest lucru nu funcționează, browserul va începe încărcarea în tampon numai atunci când afișarea devine diferită de nici una.
Dar am venit cu o metodă folosind trucuri CSS. Îți spun mai multe despre el.
Plasarea într-un bloc invizibil prin opacitatea și poziția CSS (poziționare)
În CSS există o astfel de proprietate - opacitate. Scopul său este de a schimba transparența și de a schimba transparența la zero. În plus, în CSS există și proprietatea de poziție, care este necesară pentru poziționarea unui element pe pagină (puteți muta pixelul cu informații cel puțin în interiorul și dincolo de vizibilitatea paginii). Toate acestea sunt utile pentru noi:
Astfel, obținem un bloc invizibil cu o imagine, care este, de asemenea, situată în afara informațiilor vizibile de către utilizator. Acest tip de poziționare în afara ecranului, de altfel, este adesea folosit dacă doriți să creați un fel de bloc invizibil, adesea văzut cum să vă conectați la șabloane gratuite în acest fel. Deci știi totul =)
Dacă doriți să faceți o preload a mai multor poze în acest fel, atunci trebuie doar să le specificați în interiorul blocului div, după cum urmează:
Aș vrea cu adevărat să știu cum sunteți chemați și cum să vă contactați. Completarea acestor informații nu vă va face prea mult timp și voi fi recunoscător pentru asta!
Site-ul web (opțional):
Blogul meu îți va aminti în mod automat numele de utilizator / poșta din browserul curent. Dacă doriți, acestea pot fi întotdeauna resetate.
Aboneaza-te la blogul meu
Vrei să fii primul care să afli despre cele mai interesante? Apoi abonați-vă la newsletter.
Înscriindu-vă la newsletter, veți afla mai întâi, în primul rând, cele mai importante și utile informații pentru bloggeri și webmasteri.
Sau urmăriți știrile
Creați-vă un site personal și câștigați pe Internet este destul de real. Și blogul meu vă va ajuta cu asta.
Trimiteți-le prietenilor: