Cum sa adaugi incarcarea progresiva a imaginilor pe site-ul tau?
11O data cu implinirea unui an de activitate, worldit a suferit o gramada de modificari estetice. Una dintre ele a fost incarcarea progresiva a imaginilor de pe pagina principala si din articole. Aceasta functionalitate a fost facuta din doua motive – unul estetic si unul de eficienta. Practic, cei mai mari consumatori de timp / banda la incarcarea unei pagini sunt imaginile. Cu acest mic efect, reusim sa incarcam imaginile doar atunci cand este cazul ceea ce la site-uri mari se va resimti cu siguranta.
Cum adaugam incarcarea progresiva a imaginilor?
1. Avem nevoie de jQuery si de extensia Lazy Load. In <head> adaugam codul de mai jos. (in wordpress, acesta se gaseste in general in fisierul header.php). Nu uitati sa modificati calea catre fisierul Javascript.
<script type="text/javascript" src="http://www.domeniu.ro/cale/catre/fisierul/js/lazy.load.min.js">
2. Injectam codul de mai jos in body (sau header).
<script type="text/javascript">
jQuery("de_modificat").lazyload({
effect:"fadeIn",
placeholder: ""
});
</script>
3. In codul de mai sus, inlocuim de_modificat cu clasele ce dorim sa fie tratate ca incarcare progresiva. Spre exemplu, daca vom dori sa incarcam dinamic absolut toate imaginile vom pune doar img. Daca dorim sa incarcam progresiv imaginile din clasa „imagini” si id-ul „images” vom pune .imagini img,#images img. De asemenea, daca dorim sa incarcam progresiv doar imaginile cu id-ul worldit vom pune img#worldit. Lista de exemple poate continua.
4. Desi acest plugin se ocupa de tratarea imaginilor, acesta are o mica problema. El, in modul sau default, incarca imaginile, le ascunde si abia apoi se joaca cu efectul. Noi vrem sa optimizam treaba si sa ne jucam cu acest efect si din punctul de vedere al optimizarii. Pentru imaginile care vor fi tratate de clasele/id-urile de la pasul 3, stergeti src=”link” si modificati in original=”link”.
Spre exemplu, imaginea : <img src=”http://www.worldit.info/imagine.jpg” /> va trebuie sa devina <img original=”http://www.worldit.info/imagine.jpg” />
5. Ati ajuns la sfarsit! Rezultatul acestui acestui articol il vedeti si pe worldit.info. Daca intampinati probleme, nu ezitati sa tipati intr-un comentariu! 🙂
Daca acest articol contine o greseala, selecteaza cuvintele sau fraza gresita si tasteaza combinatia de taste Shift + Enter sau apasa click aici pentru a o raporta. Multumim!
Deci ele sunt descarcate, dar nu sunt afisate => se incarca rapid pagina.
Practic, ca server, nu castigi banda, doar ca si client ai satisfactia unui load rapid al paginii.
GRESIT! Citeste pasul 4. 🙂
Si practic obtii un timp de incarcare mai mic si totodata si o pagina HTML invalida (pentru ca tag-ul „original” pentru img, nu exista). Dar daca nu esti maniac si tii mai mult de timpul de incarcare… este o solutie super ok 🙂
PS: la tine nu se observa nicio diferenta de incarcare a index-ului. 7 secunde mi se pare mult… (si nu am vreun part de conexiune!)
La mine sunt alte probleme. 😛
Si eu folosesc lazyload dar nu pentru imagini. Cred ca cel mai potrivit ar fi sa creati o singura imagine, un sprite, pe care sa il incarcati normal. In cazul acestei pagini ultima imagine se incarca destul de tirziu. Neavind specificate dimensiunile imaginii browserul face un redraw, repaint. Practic pagina pentru end user este „ready for action” destul de tarziu… Faceti deasemenea o multime de requesturi inutile
Am incercat si eu codul respectiv dar la mine nu functioneaza am inclus fisierul dar daca modific cu nu imi apare nici o imagine iar daca il las nu se comporta cu nimic deosebit. Vreo idee ?
Despre ce site este vorba, te rog ca in momentul in care pui linkul sa te asiguri ca ai facut toate modificarile(optional pasul 4). 🙂
Vad ca nu s-a mai postat aici din 2010 , dar am vrut sa incerc sa vad cum merge acest efect , dar nu merge. Am urmat toti pasii dar nu mi-a iesit nimic.Uitati exemplul meu aici: http://mariandev.dap.ro/lazyLoad/
Inlocuieste codul tau cu ce ai aici. 😛
jQuery(document).ready(function() {
jQuery(„img”).lazyload({
effect:”fadeIn”,
placeholder: „”
});
});
@Andrei Multumesc, nici nu ma asteptam sa imi raspunzi atat de repede la comentariu.Merge perfect acum 😉
sau te poti duce la pluginuri, „add new”, scrii „jQuery lazy load plugin” dai click pe install.. si gata povestea