Homepage selbermachen 7.851 Themen, 35.615 Beiträge

Javascript Preload Images

Sigi Saudi / 5 Antworten / Baumansicht 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
hansapark Sigi Saudi „Javascript Preload Images“
Optionen

Hallo.

Ich habe das früher mal ohne Javascript gemacht.
Einfach die zu ladenden Bilder "versteckt", d.h. irgendwo als img src eingebaut, mit width oder height = 1 oder = 0.
Vielleicht könnte man auch die Bilder als img src einbinden und mit display:none oder visibility:hidden verstecken.

das wäre dann CSS: 

http://www.css4you.de/visibility.html
http://www.css4you.de/display.html

Dann werden sie geladen- - sind "da" - aber werden nicht angezeigt.

grüße
h.

bei Antwort benachrichtigen
Sigi Saudi hansapark „Hallo. Ich habe das früher mal ohne Javascript gemacht. Einfach die zu ladenden...“
Optionen

Hallo Hansapark,
Genau das, was Du sagst, hatte ich in meinr Frage beschrieben, als ich ausfuehrte. wie ich es jetzt mache. Ich sagte in meiner Frage (Zitat):

" 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;):"

Danke fuer Deinen Beitrag
Was ich wissen moechte: Wie preloade ich images wirksam mit Javascript?
MfG
Sigi Saudi

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

1.) Zum ursprünglichen Problem (Wechsel der Schaltflächen-Bilder):

Beschreibung:
http://de.selfhtml.org/javascript/beispiele/buttons.htm

zugehöriges Beispiel:
http://de.selfhtml.org/javascript/beispiele/anzeige/buttons.htm

2.) Zum Vorabladen von Bildern:

http://www.starhtml.de/online/javaprog.htm#vorabladen

\"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
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
Borlander Sigi Saudi „Javascript Preload Images“
Optionen

Mach es lieber gleich ordentlich: Bau das Menü mit Text und ändere dann mit der Pseodoklasse <b>:hover</b> - ganz ohne, dass Bilder notwendig wären, oder wenn doch reicht kannst Du die als Hintergrund einsetzen...

Das was Du vorhast ist ein verdammt schlechter Grund um JS einzusetzen und definitiv nicht mehr Zeitgemäß. Tabellenlayout übrigens auch schon lange nicht mehr!
Und wenn wir schon gerade bei der Technik sind: CSS kennt nur Blockkommentare die in /* */ eingeschlossen sind und grundsätzlich solltest Du CSS besser in eine eigene Datei auslagern.


Gruß
Borlander

bei Antwort benachrichtigen