• Acasă
  • Despre noi
  • Autori
  • Mărturii
  • Arhivă
  • Trimite Articol
  • Contact

WORLDIT

Lumea în 1 și 0.

  • Știri
    • Tehnologie
    • Tehnologie mobilă
    • Securitate
    • Developers
    • Știință
    • Benzi desenate
    • Jocuri
    • Intern
  • Tehnic
    • Browser
    • C#
    • C/C++
    • Challenge
    • HTML/CSS
    • Javascript, Ajax, jQuery
    • Open Source
    • PHP
    • Python
    • Securitate IT
    • Socializare
    • WordPress
    • Altele
  • Recenzii
  • Interviuri
  • Evenimente

Cum sa adaugi incarcarea progresiva a imaginilor pe site-ul tau?

11
  • Publicat de Andrei Avădănei
  • în Javascript, Ajax, jQuery · Tehnic · Wordpress
  • — 18 aug., 2010 at 12:15 pm

O 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! 🙂

Etichete: efect javascriptincarcarea progresiva a imaginilorjavascriptjQuerylazy loadlazy load in wordpressoptimizeaza site-ul tau

— Andrei Avădănei a scris 1246 articole

Andrei scrie pe worldit.info din vara lui 2011. Este fondatorul Asociatiei Centrul de Cercetare in Securitate Informatica din Romania - CCSIR si coordoneaza DefCamp, cea mai importanta conferinta de securitate informatica & hacking din Europa Centrala si de Est. Andrei ofera in cadrul Bit Sentinel servicii de securitate informatica, penetration testing, security management, recuperarea de pe urma unui atac cibernetic, training-uri si workshop-uri.

  • Articolul anterior WebStock 2010
  • Articolul următor Yahoo Mail vine pentru iPad cu HTML 5

11 Comentarii

  1. begood spune:
    august 18, 2010 la 3:08 pm

    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.

  2. Andrei Avadanei spune:
    august 18, 2010 la 3:19 pm

    GRESIT! Citeste pasul 4. 🙂

  3. George Jipa spune:
    august 18, 2010 la 7:46 pm

    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!)

  4. Andrei Avadanei spune:
    august 18, 2010 la 8:08 pm

    La mine sunt alte probleme. 😛

  5. Mircea Piturca spune:
    august 20, 2010 la 5:03 pm

    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

  6. Nsilviu spune:
    august 22, 2010 la 12:00 am

    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 ?

  7. Andrei Avadanei spune:
    august 22, 2010 la 12:02 am

    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). 🙂

  8. mariandev spune:
    aprilie 19, 2011 la 11:13 pm

    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/

    • Andrei Avădănei spune:
      aprilie 19, 2011 la 11:26 pm

      Inlocuieste codul tau cu ce ai aici. 😛

      jQuery(document).ready(function() {
      jQuery(„img”).lazyload({
      effect:”fadeIn”,
      placeholder: „”
      });
      });

  9. mariandev spune:
    aprilie 19, 2011 la 11:52 pm

    @Andrei Multumesc, nici nu ma asteptam sa imi raspunzi atat de repede la comentariu.Merge perfect acum 😉

  10. Broods spune:
    august 7, 2011 la 2:22 pm

    sau te poti duce la pluginuri, „add new”, scrii „jQuery lazy load plugin” dai click pe install.. si gata povestea


  • Facebook

    WorldIT.info
  • Ultimele Atacuri Cibernetice din Romania – RO Hacked

    [wp_rss_retriever url="https://rohacked.bit-sentinel.com/feed/" excerpt="none" items="5" read_more="false" new_window="true" thumbnail="false" cache="0"] RO Hacked este registrul atacurilor cibernetice din România.
  • Caută

  • Articole Recomandate

    • Recent Posts
    • Tags
    • Număr record de participanți la DefCamp 2015, cel mai important eveniment dedicat securității cibernetice din Europe Centrala si de Estdecembrie 2, 2015
    • La DefCamp 2015 vei afla prin ce tehnici pot fi evitate măsurile de securitate ale sistemelor informatice criticeoctombrie 16, 2015
    • Ultima sansa sa rezervi bilete de tip Early Bird la DefCamp 2015septembrie 1, 2015
    • 15 sfaturi despre cum poti deveni un programator bun venite de la specialisti romaniaugust 4, 2015
    • algoritmica Android antivirus Apple Avadanei Andrei benzi desenate BitDefender blog browser C++ Chrome concurs eveniment Facebook Firefox Google google chrome hacking html5 infografic informatica internet Internet Explorer IT javascript linux Microsoft Mozilla Firefox online PHP programare retea sociala review Romania securitate Tehnologie Twitter web Windows Windows 7 Wordpress WorldIT worldit.info Yahoo! YouTube
  • martie 2021
    L Ma Mi J V S D
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
    « dec.    
  • Link-uri Sponsorizate

    • laptop second hand

    • Calculatoare Second Hand

    • cod voucher pc garage

  • Home
  • Tehnic
  • Javascript, Ajax, jQuery
  • Cum sa adaugi incarcarea progresiva a imaginilor pe site-ul tau?
  • Important

    • Bit Sentinel
    • Centrul de Cercetare în Securitate Informatică din România
    • DefCamp
  • Prieteni

    • BetiT.ro
    • bijuterii handmade
    • Computerica | Resurse gratuite PC
    • Descopera.org
    • Gadgeturi si IT – Giz.ro
  • Prieteni

    • PC – Config
    • RO Hacked
    • Stiri IT

Copyright © 2009-2014 WORLDIT. Toate drepturile Rezervate.
Termeni și condiții | Contact | Licența Creative Commons