Bilder vorladen mit jQuery / JavaScript

17.10.2012 10:30 Uhr

Warum eigentlich vorladen?
Habe ich z.B. einen Button, bei dem ich bei Hover das Hintergrundbild austausche, kann es durch die erforderliche Ladezeit des Bildes zur Verzögerung dieses Effektes kommen. Der erste Hover-Effekt ist in Extremfällen erst nach 1, 2 Sekunden sichtbar.

Wie?
Im Netz kursieren ja viele verschiedene Möglichkeiten. Von uralten JavaScript-Lösungen bis hin zu ausgeklügelten jQuery-Plugins. Bisher brachten mir allerdings alle Möglichkeiten, die ich bisher kannte, zu viel Overhead mit. Zu viel Code für so einen kleinen Anwendungsfall.

Jetzt habe ich allerdings eine ausgesprochen simple Möglichkeit entdeckt, die ich gerne mit euch teilen würde.

Ein einzelnes Bild mit jQuery vorladen

var image = $('<img />').attr('src', '/path/to/image.png');

Mehrere Bilder

var images = [
	'/path/to/image1.png',
	'/path/to/image2.png'
];

$(images).each(function() {
	var image = $('<img />').attr('src', this);
});

Hoffe das hilft dem ein oder anderen von euch auch mal. 

Freue mich über Ergänzungen oder Hinweise auf andere Lösungsmöglichkeiten.

Tim

2 Antworten

#1

18.10.2012 08:52 Uhr

Hover Effekte versuche ich wenn möglich nur mit CSS und einem sprite zu realisieren. Dann fällt das vorladen und sonstiger Overhead weg.

http://www.w3schools.com/css/css_image_sprites.asp

#2

19.10.2012 13:18 Uhr

Ich nutze häufiger auch die Methode das Bild für den Hover-Effekt bereits in einem anderen Element, negativ positioniert, als Hintergrund zu verwenden.

Ähnliche Fragen



Datenschutzerklärung · Impressum