Image placeholder og lazy-load

Tags:    html html5 javascript jquery

Jeg har lagt mærke til at flere Spotify Apps (som vist er primært HTML5 og JS) har et billede bag originalen, som det enkelte billede så loader ovenpå bagefter.

Det gør at man som bruger føles at sitet er klart før alt egentlig er loadet også fordi der jo som oftest står titler på album osv.

Jeg har selv et site med rigtig mange videothumbnails og tænkte at man måske kunne bruge samme trick.
Er det noget nyt HTML5 eller er det bare en simpel placeholder, som man så sætter noget lazy-load på bagefter?



8 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 17 karma
Sorter efter stemmer Sorter efter dato
Det er ret simpelt at lave. Og det behøver for så vidt ikke at have noget med html5 at gøre.

Når du siger lazy-load antager jeg, at du mener at man sætter billeder til at loade ind når siden er færdig. Så fx ser dine thumbnails sådan her ud:

Fold kodeboks ind/udHTML kode 


Så kører du bare noget javascript der fanger alle dine thumnails, tager værdien af data-realsrc attributten og flytter den til src.

Det eneste html5 i det der er data-* attributten. Men det kan man også bare gøre med html>5 hvis man ikke går op i at validere sin kode.

Men der hvor det rigtigt giver god mening er hvis du har mange items i dit galleri, og at du laver pagination med javascript. Så vil du kunne nøjes med at loade de billeder, på page-load, som skal vises. Når siden så er indlæst sætter du næste side i dit galleri til at loade billeder. Og når der bliver skiftet til den loader du næste sides billeder...

Hvis du vil loade billeder før de bliver vist på din side kan du bare tilføje et img-tag uden for DOM og derefter sætte src attributten på det image. Så vil browseren hente det, og så er det allerede hentet når du sætter det ind.




..og hvis man vil undgå javascript

Fold kodeboks ind/udHTML kode 




Indlæg senest redigeret d. 24.05.2012 22:42 af Bruger #10216
Jeg er sikker på at det ikke gør, som du beskriver. Der er ingen nævnte krav om DOM eller lign.

Hvad jeg har beskrevet er 2-lags løsningen for billedeload, mere eller mindre som Morten beskriver det i første afsnit. Idéen er ganske simpel. Man bruger et 2KB erstatningsbillede for browseren får tid til at vise et 200KB billede. - og da 2KB billedet står beskrevet først (i et stylesheet, som ref. i <head>;), henter browseren naturligvis dette billede før den henter 200KB.



Indlæg senest redigeret d. 25.05.2012 10:16 af Bruger #10216
Michael, er du sikker på at det resulterer i at real-image.gif først bliver loadet efter DOM-Content-ready?



Det kan du så have ret i. Jeg tror ikke at det giver samme fornemmelse af at siden er "klar". Men det kan man jo teste, hvis man regner med at bruge det. :-)



Tak for de gode svar :)

Hvis man bruger Michaels JS-fri version betyder det så ikke at den også henter de korrekte billeder før hele sitet er loadet?




@Morten, jo - det vil jeg mene at det gør. Samtidigt er der problemet med at det ikke er sikkert at et background-image på et img-element dækker for billedet - så du kan måske blive tvunget til at bruge et transparent placeholder billede - og så er du jo lige vidt. Jeg har ikke testet det - men det er bare en bange anelse.

De gange jeg har haft brug for det, har jeg benyttet mig af data-src attributten. Det er meget nemt at gå til og virker som det skal. Men som sagt - der hvor lazy-load shiner er når du preloader billeder til indhold som endnu ikke vises på skærmen - som f.eks. ved pagination. Hvis du ikke bruger den slags, så er det marginalt hvad du får ud af det.



Tjah, hvis du vil have en 100% lazy-load løsning, så må du droppe forslag som den jeg kom med og forslag om preload billeder. Lazy-load handler jo om at man kun loader noget når det skal bruges, og det gør man først i sidste øjebilk.

Min teori lyder at alle billeder i et stylesheet bliver downloadet før billeder i indlejret i htmlkode. Det sker grundet at browsere læser og eksekverer proceduralt. Da indlejret billeder står senere end billeder refereret til i et stylesheet, må min teori nødvendigvis holde.
Det er netop samme idé man benytter ved JavaScript der først indlæses ved det afsluttende </body> tag.



t