Preloading obrazków w jQuery
2010-09-29 10:34:04
Dziś mały tip Javascript/jQuery. Kod ten pozwala na wykrycie momentu załadowania do pamięci pobranego obrazka na stronie internetowej. Dodaje go tutaj bo trochę sie nad tym męczyłem, a może się komuś przydać (w programowaniu 'webowym' jestem nowicjuszem ;) ). Od razu przejdę do kodu i krótkiego omówienia co się w tym kodzie dzieje:
function load_image(imgSrc){
// przed ladowaniem obrazka (np. pojawia sie gif z ladowaniem)
var image=new Image(); // (1)
$(image).load(function(){ // (2)
// obrazek zaladowany do pamieci (np. mozna schowac juz gif z ladowaniem)
// laduje obrazek z pamieci do naszego elementu img (zmiana atrybutu src)
$('#popup_image').attr('src',imgSrc); // (4)
// np. pokazuje wczesniej ukryty obrazek
$('#popup_image').fadeIn('slow');
// zmiana pozycji rozmiaru obrazka itp.
...
// reset callbacka
image.onload=function(){};
}).attr('src',imgSrc); // (3)
}
- (1) na początku sam obrazek jest pusty (var image=new Image()), taki obrazek oczywiscie nie jest widoczny - istnieje tylko w pamieci
- (2) funkcja jQuery: load - definiuje funkcje ktora bedzie uruchomiona po zaladowaniu obrazka (callback)
- (3) następnie ustawiamy atrybut 'src' naszego pustego obrazka na odpowiednia wartość (ścieżka i nazwa pliku do obrazka) (attr('src',imgSrc). Po zmianie atrybutu src obrazek sie laduje, gdy sie zaladuje - uruchamiany jest wczesniej zdefiniowany callback
- (4) w funkcji callback-a mozna przypisac zaladowany obrazek z pamieci przypisujac docelowemu elementowi img atrybut 'src' z nasza nazwa pliku (imgSrc) - obrazek laduje sie natychmiast z pamieci.
PS. Przy okazji polecam wszystkim web-developerom bibliotekę jQuery, zwłaszcza często używających Javascript. Jest to kompaktowa i bardzo dobrze zaprojektowana biblioteka, bardzo przyjemna w obsłudze.
Tagi: Programowanie jQuery Javascript
Komentarze:
Charlie3D
Dzięki
Data: 2010-10-01 16:12:00
jerzaub
wyjaśniło mi to co nie co, dopiero się uczę ;) dzięks
Data: 2011-10-30 10:48:47
