Homepage selbermachen 7.846 Themen, 35.563 Beiträge

Javascript Preload Images

Sigi Saudi / 5 Antworten / Flachansicht Nickles

Hallo Gemeinde,
Beim Ausgestalten meiner Homepage wollte ich mit mouseover / mouseout einige pink gestaltete Schaltflaechen gegen blaue auswechseln, wenn die Maus darueber geht. Ich schrieb mir mit javascript eine Routine, die dafuer sorgt, dass bei mouseover jeweils die Schaltflaeche mit dem blauen Hintergrund und bei mouseout die Schaltflaeche mit dem pinkfarbenen Hintergrund erscheint. Das funktioniert praechtig.
Ich hatte nur ein Problem. Wenn ich das erste mal nach dem Laden der html Page mit der Maus ueber eine Schaltflaeche ging, dauerte es fuerchterlich lange, bevor die Farbe wechselte. Also suchte ich im Internet nach javascript preload Routinen, fand auch einige und ich entschied mich fuer die folgende:

LEIDER HAT NICKLES DEN CODE GELOESCHT.
WIE KANN ICH JAVASCRIPT IN EINEN NICKLES BEITRAG EINBINDEN?


Aktiviert habe ich die Routine durch onload="preloader()", eingefuegt in das body tag.
Meine Enttaeuschung war gross. Es aenderte sich nichts. Das erste Wechseln der Schaltflaechen verkuerzte sich nicht.
(Mein Webhoster sitzt in Chiang Mai / Thailand, weil ich in 2 - 3 Monaten permanent nach Thailand uebersiedeln werde. z.Z. bin ich permanent in Saudi Arabien, von wo aus ich auch die Tests fahre).
Ich untersuchte die Routine und baute die markierten Kontrollbefehle ein ( for schleife / alert Klammer auf ,i + " = " + document.images[i].src Klammer zu, semikolon). Ich fand heraus, dass das Objekt "document.images[i].src", das die image Adressen der von html geladen images enthaelt, meine preloaded images nicht enthielt. Ich konnte sie auch nicht aus dem images[] array unter Modifizierung des javascript codes hineinladen.
Meine Frage nun:
Mach es Sinn, mit javascript ein Objekt zu generieren und in dieses Objekt die image Adressen hineinzuladen, die html noch nicht geladen hat? Kann html dann auf diese images unverzueglich zugreifen? Das heisst, sind images wirklich preloaded, wenn ihre Adressen in ein neu generiertes javascript Objekt hineingeladen sind? Ich bezweifle das, basierend auf meinem Test.
Ich habe die Sache nun folgendermassen geloest:
Ich pre-lade die images nun ueber "src.." sofort nach dem "body" tag. Damit die Bilder nicht angezeigt werden, fuegte ich unter "style" die folgende "class" ein (display:none;):

Die "src.." lines sehen folgendermassen aus:


LEIDER HAT NICKLES DEN CODE GELOESCHT.
WIE KANN ICH HTML IN EINEN NICKLES BEITRAG EINBINDEN?


Die dazugehoerige URL ist
http://www.moon-and-sun.com
Die 3. Seite (pink) in der chain enthaelt den code, egal, ob als Sprache Deutsch, Englisch oder Thai gewaehlt wurde.

Ich wuede mich sehr freuen, wenn mich jemand darueber aufklaeren wuerde, ob ein preload der images erfolgt, wenn man die image Adressen in ein javascript Objekt laedt. Auch waere interessant zu hoeren, wie man einen echten preload mit javascript programmieren kann.
Gruss aus der Wueste
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
asterix5 Sigi Saudi „Javascript Preload Images“
Optionen

Nachtrag:

Das Vorabladen von Bildern wird Dein Projekt kaum schneller machen, weil Du viel zu viele und viel zu große Elemente verwendest. Die Startseite (andere Seiten habe ich mir nicht angesehen) braucht zwei Ewigkeiten zum Laden. Ein Test-Werkzeug ermittelt über 695.000 Bytes für alle Elemente. Das ist einfach zu viel.

Siehe hier: http://tinyurl.com/6bqy9h6

\"Als ich nach Deutschland kam, sprach ich nur Englisch - aber weil die deutsche Sprache inzwischen so viele englische Wörter hat, spreche ich jetzt fließend Deutsch!\" (Rudi Carrell)
bei Antwort benachrichtigen