Zadnje čase sem na nekaterih straneh opazil, da se slike ne nalagajo kot je to v navadi ampak nekoliko neobičajno. Namesto slike se najprej prikaže kakšen preprosti gif, ki nakazuje, da se slika v ozadju nalaga. Takrat, ko se slika prenese v celoti, se gif zamenja z aktualno sliko. Na podoben način sedaj tudi google prikazuje slike, kjer ni treba več klikati na naslednjo stran, ampak se slike dodajajo na koncu seznama in dinamično naložijo.
Ker imam tudi sam kakšne projekte, kjer je zelo veliko slik prikazanih na strani (razne galerije ali trgovine), sem se odločil zadevo raziskati. Odkril sem, da je to relativno preprosto izvedljivo z nekaj vrsticami javascript kode, seveda z uporabo jQuery knjižnice. Poudariti moram tudi, da to ni dinamično nalaganje slik, v smislu, da slike eno za drugo nalagamo v celoti, ampak ima samo uporabnik vtis, kot da se to v ozadju dogaja.
Problem
Če imamo na strani veliko slik, lahko kar nekaj časa traja, da se stran v celoti prikaže. Lahko pride celo do preloma strukture strani, dokler se slike ne naložijo v celoti, če to s CSSjem ni predvideno. S tem vodičem se izognemo tem težavam. Še prijazneje pa je z vidika uporabnika, saj se slike, ko so prenesene na računalnik, v celoti prikažejo s fadeIn efektom.
Rešitev
Za izvedbo tega potrebujemo:
- jQuery
- Gif, ki prikazuje, da se nekaj dogaja
- Sliko, ki se prikaže v primeru napake
HTML
Slika v HTMLju mora imeti class delayLoad, ker z pomočjo tega classa z jQuerijem dobimo slike, ki jih želimo dinamično naložiti. Atribut src je v začetku prazen, kasneje se v javascriptu nastavi na enako vrednost, kot jo ima atribut alt, kjer je shranjena dejanska pot do slike. Če vam ni všeč, da je src prazen, vam predlagam, da naredite transparentno sliko (1×1 px).
CSS
-
.delayLoad {
-
background: url('images/ajax-loader.gif') no-repeat 50% 50%;
-
}
Do sedaj bi moralo biti še vse jasno, saj je to standardna HTML in CSS koda. S CSSjem sem dodal gif za ozadje, ki ga uporabnik vidi namesto slike, dokler le-ta ni naložena.
Javascript koda
-
//Z ready funkcijo povemo, da se ta koda začne izvajati, ko je stran naložena
-
jQuery(document).ready(function() {
-
//poiščemo vse slike z classom delayLoad
-
jQuery("img.delayLoad").each(function() {
-
-
// Ustvarimo span element, ki ga bomo s pomočjo jQuery funkcije wrap dodali okoli posamezne slike
-
// Primer:
-
// <span>
-
// <img src='' alt='' />
-
// </span>
-
var delaySpan = document.createElement("span");
-
-
//to samo pomeni, da mi znotraj tega ni potrebno pisati jQuery(this).css
-
with (jQuery(this)) {
-
//Za slike, ki so skrite in jih želimo dinamično naložiti ni potrebno, da je gif viden.
-
//Drugače pa mora span imeti atribut display nastavljen na 'block', ker opcija 'inline' ne deluje dobro.
-
if (css('display') == 'none') {
-
var _display = 'none'
-
}else {
-
var _display = 'block'
-
}
-
-
//kopiramo CSS od trenutne slike v span zato, da nam ga ni potrebno posebej oblikovati.
-
var cssObj = {
-
'height' : css('height'),
-
'width' : css('width'),
-
'margin-top' : css('margin-top'),
-
'margin-right' : css('margin-right'),
-
'margin-bottom' : css('margin-bottom'),
-
'margin-left' : css('margin-left'),
-
'background-image' : css('background-image'),
-
'background-color' : css('background-color'),
-
'background-repeat' : css('background-repeat'),
-
// Zaradi IE, ker ne zna pravilno prebrati lastnosti background-position (ostale CSS lasnosti se vzamejo iz trenutne slike)
-
'background-position' : '50% 50%',
-
'display' : _display
-
}
-
}
-
// Spanu dodamo CSS, zato da bo izpis na strani enak pred in po naloženi sliki
-
jQuery(delaySpan).css(cssObj);
-
-
// Span element dodamo okoli slike
-
jQuery(this).wrap(delaySpan)
-
-
// Sliko skrijem, viden ostane samo span z gifom
-
.hide()
-
-
//sliki spremenimo src, ki ga preberemo iz alt atributa
-
.attr('src', this.alt)
-
-
// ta klic funkcije se izvede, ko je slika v celoti naložena
-
.load(function () {
-
//sliko prikažemo z fadeIn efektom in odstranimo dodani span.
-
jQuery(this).fadeIn().unwrap();
-
})
-
-
//v primeru, da slika ne obstaja ali če pride do kakšne napake, se izvede error funkcija namesto load,
-
//v njej nastavim osnovno sliko in odstranim kreirani span element
-
.error(function() {
-
jQuery(this).attr('src', "images/error.jpg");
-
jQuery(this).fadeIn().unwrap();
-
});
-
});
-
});
Zaključek
Zadeva je lahko izvedljiva, če imate osnovno razumevanje javascripta. Ima omejitev, da uporabniki brez javascripta ne bodo videli slik. Vendar mislim, da to v današnjih časih ne bi smel biti problem. Saj imajo v osnovi vsi brskalniki vključen javascript. To sem testiral v Firefoxu in vseh relevantnih verzija IEja in super dela.
Imaš kakšen komentar ali popravke? Si kdaj delal kaj podobnega, kako si se ti lotil tega problema?
Viri in literatura
- purplepixelmedia.co.uk za osnovo sem si vzel ta vodič in ga dodelal, da se slike nalagajo on load in dodana je funkcija error
- blog.realmofzod.com Implementiral podobno funkcijo error kot je tu uporabljena.
Podobni članki: