Tag img jest jednym z najpotrzebniejszych znaczników na stronach. Jednak gdy przychodzi do dynamicznego ładowania czy zmiany atrybutów często pojawiają się niespodziewane problemy, które chciałbym przedstawić razem z rozwiązaniami.

Przykładowy obrazek:


<img id="pic" src="http://cdn.contails.websgo.net/imgs/logo_beta6_3_pl.png" />


var pic = document.getElementById('pic');

Pobranie wysokości i szerokości obrazka osadzonego w DOM.


var w = pic.width;
var h = pic.height;

Ciekawsza rzecz zaczyna się wtedy, gdy chcemy załadować zdjęcie dynamicznie i pobrać jego rozmiar.


//tworzymy obrazek
var pic2 = new Image();
//początkowy timestamp
var timeStamp = new Date().getTime();
//nadajemy id
pic2.id='pic2';
//rejestrujemy zdarzenie onload
pic2.onload = function() {
	//końcowy timestamp
	var timeStamp2 = new Date().getTime();
	//po ładowaniu: w=1680 h=1050
	console.info('po ładowaniu: w='+pic2.width+' h='+pic2.height, timeStamp2);
}
//ładujemy obrazek
//dołączenie timeStamp po '?' powoduje, że plik nie jest keszowany po stronie przeglądarki
pic2.src = 'http://farm4.static.flickr.com/3278/3007588450_afdf31ea55_o.jpg?'+timeStamp;

//onload WYWOŁA sie bez dodania do DOM
//document.getElementById('my-div').appendChild(pic2); 

//przed ladowaniem: w=0 h=0
console.info('przed ladowaniem: w='+pic2.width+' h='+pic2.height, timeStamp);

ZOBACZ DEMO »

Kod działa we wszystkich przeglądarkach, kluczem jest zarejestrowanie zdarzenia onload przed ustawieniem wartości atrybutu src.

Jeżeli chcemy usunąć atrybut src


var pic = document.getElementById('pic');
//Źle - spowoduje dociąganie obrazka o nazwie null w IE
pic.src = null;

//Dobrze
pic.removeAttribute('src');
//Ukrycie potrzebne w IE
pic.style.display = 'none';

Bonus: Base64 zamiast URLa

Zamiast podawać ścieżkę w src można wstawić w nią obrazek zakodowany w Base64.


<img src="data:image/png;base64,KodBase64" />

No Comments
Javascript