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.950
Besucher heute: 538
Besucher gestern: 286
Max. Besucher/Tag: 1.578
Gerade online: 22
Max. online: 167
Seiten gesamt: 28.901.865
Aufrufe diese Seite: 143

Tag-Cloud

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