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.947
Besucher heute: 535
Besucher gestern: 286
Max. Besucher/Tag: 1.578
Gerade online: 24
Max. online: 167
Seiten gesamt: 28.901.744
Aufrufe diese Seite: 124

Tag-Cloud

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