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

Az előző cikkben megnéztünk egy módszert arra, hogy lehet reszponzív oldalak esetében képeket betölteni sávszél takarékosan (éljenek a mobilosok). Most ezt a módszert finomítjuk úgy, hogy csak akkor töltődjön le egy kép, ha az egyébként is látszódna. Minek töltetnénk le egy képet – ami az oldalunk legalján van - a felhasználóval, ha az nem is látszik?

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

scroll diagram

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

Avast vírusírtó letöltés ingyen
Gearbest Banner