Entwicklung - Javascript/Ajax - Bilder in HTML-Dateien vorladen

Javascript/Ajax: Bilder in HTML-Dateien vorladen

rob (57)

rob

12.08.2002 00:42

Vinn

  • 323 Postings, noch 27 bis zum nächsten Level (350)

Postings: 323

Bilder in HTML-Dateien vorladen

Dienstag, 16. März 2004 00:16

  • 0.0/6 Votes: 0
0.0/6 Votes: 0

manchmal ist es für bestimmte Effekte nützlich, dass Bilder schon vorgeladen sind wenn die entsprechende Aktion ausgeführt wird.
Beispiel: es soll bei 'onMouseOver' ein Bild gegen ein neues Bild ausgetauscht werden. Im Normalfall wird dann, wenn man mit der Maus über das Bild fährt erst das neue Bild geladen - und wenn man dann nur kurz mit der Maus über das Bild fährt, kann es sein, dass man von diesem Effekt gar nichts mitbekommt, weil das neue Bild ja noch nicht geladen ist.

Hier mal 2 Lösungen, um Bilder vorzuladen:

mit Javascript:

var bild1 = new Image();
bild1.src="bild1.gif";
var bild2 = new Image();
bild2.src="bild2.gif";
usw.

oder man zeigt das zuladende Bild einfach an (mit einer Höhe und Breite von 1 Pixel):

< img src="bild1.gif" width="1" height="1" alt="" />

das 1 Pixel grosse Bild fällt i.d.R. fast gar nicht auf, man kann es z.B. aber auch geschickt z.B. hinter einem Link einsetzen und es fällt gar nicht mehr auf. Wenn zuviele Bilder geladen werden sollen macht das mit dem 1Pixel-Bild natürlich keinen Sinn - aber bei wenigen Bildern ist es eine einfache Lösung - ohne Javascript einsetzen zu müssen.

manu (53)

manu

03.09.2002 23:07

Aachen

  • 876 Postings, noch 24 bis zum nächsten Level (900)

Postings: 876

Re: Bilder in HTML-Dateien vorladen

Donnerstag, 29. April 2004 14:51

Um das zu bewerkstellugen habe ich noch eine ganz nette Funktion gefunden, die im HTML-Head oder von extern geladen wird:

function preloader() {
if (!document.images) {
return;
}
var array= new Array();
var arguments = preloader.arguments;
for (var i=0; i<arguments.length; i++) {
array[i] = new Image();
array[i].src = arguments[i];
}
}

Im Body-Tag werden dann die Bilder folgendermassen eingebunden:

onload="preloader('bild01.gif','bild02.jpg','bild03.png')"

Signatur:\"I have not failed. I\'ve just found 10,000 ways that won\'t work.\" - Thomas Alva Edison (1847-1931)
Bookmark setzen!:Zu Google Bookmark hinzufügen.Zu bloglines hinzufügen.Zu Newsgator hinzufügen.Zu FURL hinzufügen.Zu DIGG hinzufügen.Zu Webnews hinzufügen.Zu Netscape hinzufügen.Zu Yahoo MyWeb hinzufügen.Zu spurl.net hinzufügen.Zu diigo hinzufügen.Zu Newsvine hinzufügen.Zu del.icio.us hinzufügen.Zu SIMPIFY hinzufügen.Zu Mister Wong hinzufügen.Zu Linkarena hinzufügen.Zu isio.de hinzufügen.Zu Oneview hinzufügen.Zu yigg.de hinzufügen.Zu reddit hinzufügen.Zu StumbleUpon hinzufügen.Zu Slashdot hinzufügen.Zu Blinklist hinzufügen.Zu Technorati hinzufügen.Zu Blogmarks hinzufügen.Zu Blinkbits hinzufügen.Zu ma.gnolia hinzufügen.Zu smarking.com hinzufügen.Zu Netvouz hinzufügen.Zu co.mments hinzufügen.Zu Connotea hinzufügen.Zu de.lirio.us hinzufügen.

Specials

Bytefresser Specials: Anno 1404

Umfrage

Welches ist Dein Lieblings-Anno?

(151 Stimmen)

1. Ganz klar: Anno 1800!
2. Anno 2205
3. Anno 2070
4. Anno 1404
5. Anno 1701
6. Anno 1503
7. Anno 1602
8. Anno Online

Benutzer-Counter

Besucher gesamt: 1.265.305
Besucher heute: 179
Besucher gestern: 86
Max. Besucher/Tag: 1.578
Gerade online: 17
Max. online: 167
Seiten gesamt: 28.897.039
Aufrufe diese Seite: 119

Tag-Cloud

  edison     webdesign     normalfall     array     thomas     über     postings     höhe     programmierung     aktion     donnerstag     bilder     bookmark     beispiel     lösung     html-dateien     level     pixel     april     märz     html-head     funktion     signatur     entwicklung     javascript     dienstag     bytefresser     aachen     body-tag     effekt