Reszponzív és pozíciófüggő képbetöltés

Mi is a gond azzal, ha minden képet betöltünk az oldalra?

Valójában semmi. Viszont ha szeretnénk gyors és takarékos honlapot készíteni, akkor ez egy jó megoldás lehet. Több tíz, vagy több száz termékkép esetén különösen érdemes elgondolkodni azon, hogy ténylegesen le kell-e töltetni a látogatóval minden termékképet, főleg azokat, amiket még nem is lát. Itt most megint kiemelném a mobillal böngészőket, jelenleg náluk még fontos, hogy ne 1-2 megányi adatot húzzanak le, hanem minél kevesebbet. Ugye a sávszélesség, a letöltési korlát, a megjelenítők teljesítménye.

Hogyan detektáljuk, hogy látszik-e már a kép?

Egy viszonylag kis jQuery bővítménnyel nagyon egyszerű dolgunk van. A Digital Fusion jóvoltából, rendelkezésünkre áll a visible plugin, $('#elem').visible();.

A plugin megmondja egy elemről, hogy teljes egészében látszik-e jelenleg vagy sem. Illetve plusz funkciója, hogy azt is lekérdezhetjük, hogy részben látszik-e (tehát ha az elem fele már látszik az is detektálható).

Ami a container-ből kiesik, az nem látható, így nem is kell előre letölteni...

A javascript kódunk kiegészítése a láthatóság detektálással

 // a képet méretei felbontásokhoz igazítva
 var _respImgSizes = new Object();
 // 640px szélesség alatt small
 _respImgSizes[640] = "small";
 // 640-1024px között medium
 _respImgSizes[1024] = "medium";
 // a betöltött képek objektuma
 var _respImgHolder = new Object();

 // átméretezéskor megvizsgáljuk kell-e képeket cserélni
 $(window).resize(function() {
   respimg();
 });
 $(window).scroll(function() {
   respimg();
 });
 // az oldal betöltésekor is megvizsgáljuk kell-e képeket betölteni
 $(document).ready(function(){
   respimg();
 });

 // a képek cseréje, felbontástól függően
 function respimg(){
   // aktuális felbontás lekérdezése
   var w = $(window).width();
   // alap kép méret meghatározása
   var size = 'original';
   // megnézzük melyik képméretet kell használnunk
   $.each( _respImgSizes, function( key, value ) {
     if (w <= key){
       size = value;
       return false;
     }
   });

   // az érintett span elemek elemzése
   $("span[data-respimg=true]").each(function(){
     // megvizsgáljuk látható-e a kép
     if ($(this).visible(true) !== true) {
       // ha nem, akkor következő iteráció
       return true;
     }
     // lekérdezzük a megfelelő méretű kép forrását
     var src = $(this).data(size);
     // lekérdezzük a leendő kép alt tulajdonságát
     var alt = $(this).data('alt');
     // ha még nem töltöttük le az adott képet, az az nem készült még objektum belőle, akkor elkészítjük
     if (typeof _respImgHolder[src] == "undefined") {
       _respImgHolder[src] = new Image();
       // kép forrásának beállítása
       _respImgHolder[src].src = src;
       // kép alt tulajdonságának beállítása
       _respImgHolder[src].alt = alt;
     }
     // a span elemben elkészítjük a kép elemet
     $(this).html(_respImgHolder[src]);
   });
 return true;
}

A fent említett visible() plugin-t ne felejtsük el behúzni a kód elején.

Látható, hogy kikerült, a _respImgCurrentSize váltózó, nem lesz rá szükségünk már, hiszen nem spórolhatunk azon, hogy egy adott méretre váltottunk-e.

Lényegében az érintett elemek elemzését egészítettük ki, úgy, hogy leellenőrizzük az aktuális elemet a visible() plugin segítségével, ha nem látható - részben sem - , akkor kihagyjuk az elemet. Illetve bekerült, még egy eseményfigyelés, a scroll(). Mivel innentől már nem csak az ablakunk méretét kell figyelni, hanem azt is, hogy éppen hol tartunk a böngészésben.

Mit kell módosítanom a html részen?

A data-original rész módosult csak, bár ez a reszponzív részhez tartozik, így biztosítjuk, hogy mi az alapból megjelenítendő kép.

<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites stillin their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<span data-alt="kep1" data-respimg="true" data-small="kepek/kep_01_s.jpg" data-medium="kepek/kep_01_m.jpg" data-original="kepek/kep_01.jpg"></span>
<noscript><img src="kep_01.jpg" alt="kep1" /></noscript>

Szem előtt kell tartani azt a tényt, hogy amíg a képek nincsenek betöltve, addig az oldalunk mérete is kisebb, hiszen kép betöltés előtt a span elemeknek nincs szélesség és magassága, így a ténylegesnél több kép látható lesz egyszerre, így csak azok töltődnek be később, amelyek valóban az aktuálisan látszó területen kívül esnek.

Sok sikert használathoz, amennyiben hibát találtok, írjátok meg itt a cikk alatt!

A jelenlegi és előző cikk megoldásai kipróbálhatóak itt:

Reszponzív megoldás

Reszponzív és pozíciófüggő megoldás