Bilder vorladen mit jQuery / JavaScript Frage Bilder vorladen mit jQuery / JavaScript zu Favoriten hinzufügen

Daumen hoch 0 Daumen runter

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

Antworten


Diese Antwort als GUT bewerten 2 Diese Antwort als SCHLECHT bewerten

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

Stimmt, das ist auch eine sehr gute Methode. Allerdings nicht immer einsetzbar, da du ein transparentes Bild im src verwendest. Wenn man also möchte, dass das richtige Bild in der Google Bildersuche erscheinen soll, dann kann man das leider nicht so lösen.

Tim am 18.10.2012
Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

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.

Deine Antwort

Registrierter User Bereits registriert? Bitte logge dich vor dem Antworten ein.

Deine Daten