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

Javascript/Ajax: Bilder in HTML-Dateien vorladen

rob (53)

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 (48)

manu

03.09.2002 23:07

Aachen

  • 872 Postings, noch 28 bis zum nächsten Level (900)

Postings: 872

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?

(17 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.160.067
Besucher heute: 13
Besucher gestern: 73
Max. Besucher/Tag: 900
Gerade online: 7
Max. online: 77
Seiten gesamt: 18.117.687
Aufrufe diese Seite: 4.570

Tag-Cloud

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