wann Funktion zum Bilder-Laden aufrufen?
lousypoetry
- javascript
0 Detlef G.
Hallo!
Mal wieder das leidige Thema des Bilder-Vorladens. Mein Problem: ich hab eine Navigation die aus Text und zwei Bildern besteht. Wird die Seite nun geladen ist der Text natürlich schneller vorhanden als die Bilder, was nicht unbedingt elegant aussieht. Ich hab im Archiv gewühlt und hab die Lösung mit dem "Bilderaustausch" gefunden, so dass ich zuerst zwei 1px*1px große Leer-gifs verwende und diese dann gegen die eigentlichen Bilder aus einem Array ausgetauscht werden.
Jetzt aber meine Frage: wann rufe ich am besten die Funktion auf, die genau diese Aktion durchführt? Ich hab gelesen, dass wenn ich sie im <body>-Tag verwende, sie erst aufgerufen wird, wenn die Seite komplett geladen ist, was wenig Sinn machen würde. Rufe ich sie mit
meine_function();
im <head>-Bereich auf, bekomm ich die Fehlermeldung, dass noch kein <img> existiert, wo die src ausgetauscht werden soll. Kann mir da jemand nen Tipp geben? Danke!
Hallo
Wird die Seite nun geladen ist der Text natürlich schneller vorhanden als die Bilder, was nicht unbedingt elegant aussieht. Ich hab im Archiv gewühlt und hab die Lösung mit dem "Bilderaustausch" gefunden, so dass ich zuerst zwei 1px*1px große Leer-gifs verwende und diese dann gegen die eigentlichen Bilder aus einem Array ausgetauscht werden.
Irgendwie verstehe ich das nicht.
Wenn Du willst, dass die Bilder vor dem Text sichtbar werden, dann würden die Leer-gifs und der nachträgliche Austausch derselben, die Anzeige doch nur zusätzlich verzögern.
MFG
Detlef
Irgendwie verstehe ich das nicht.
Wenn Du willst, dass die Bilder vor dem Text sichtbar werden, dann würden die Leer-gifs und der nachträgliche Austausch derselben, die Anzeige doch nur zusätzlich verzögern.
Vor dem Text ist nicht wirklich nötig, sollte nur nach Möglichkeit so sein, dass es gleichzeitig oder halt die Bilder nicht so extrem hinterherhinken.
Ich hatte das im Archiv so verstanden, dass wenn ich anstelle der richtigen Bilder minimal große leergifs in den HTML-Code setzen und dann die richtigen Bilder per
var b = new Image(); b.src = "xyz".jpg";
schon mal vorlade, das ganze dann schneller geht. Oder hab ich das falsch verstanden?
Hallo lousypoetry,
Prinzipiell wird für jede Resource auf deiner Seite (externe Javascripts, externe Stylesheets, Bilder) ein eigener Request an den Server abgesetzt. Die Reihenfolge, in der der Server diese Resourcen ausliefert bzw. in der sie beim Browser ankommen, kannst Du soweit ich weiss nicht beeinflussen.
Wenn Du bei jedem Bild allerdings Höhe und Breite angibst, kann der Browser an der entsprechenden Stelle schon mal den Platz reservieren, und der Text verschiebt sich nicht jedesmal, wenn ein neues Bild ankommt. Ich denke, das wird das sein, was Du erreichen willst.
Vorladescripts sind eigentlich nur für Bildertausch bei Rollover sinnvoll [1], da sonst der Browser das neue Bild erst dann anfordert, wenn der Besucher mit der Maus über das zu tauschende Bild fährt, und so eine Verzögerung entsteht.
Ich hoffe, ich habe mich einigermassen verständlich ausgedrückt, und den Sachverhalt korrekt beschrieben.
[1] Zumindest fällt mir im Moment kein anderer Anwendungsfall ein.
Grüße
Andreas
Wenn Du bei jedem Bild allerdings Höhe und Breite angibst, kann der Browser an der entsprechenden Stelle schon mal den Platz reservieren, und der Text verschiebt sich nicht jedesmal, wenn ein neues Bild ankommt. Ich denke, das wird das sein, was Du erreichen willst.
Höhe und Breite hab ich im <img>-Tag notiert, von daher verschiebt sich auch zum Glück nichts. Mir gehts eher darum, dass ich ein Navigationsmenü kreiert hab - wenn es komplett geladen ist - nicht erkennen lässt, dass es aus einer Tabelle und oben und unten je einer Graphik besteht, wenn es sich aufbaut sieht man es natürlich, was nicht unbedingt so graziös aussieht (die Seite ist noch nicht fertig, ist quasi nur ein Test):
http://riazahn.bei.t-online.de/test/inhalt.html
Von daher dachte ich, ich könnt da evtl mit Vorladen was ändern, aber vielleicht fällt mir auch noch was ein, um das Menü ohne Graphiken und nur mit CSS zu gestalten... Aber ehrlich gesagt weiß ich nicht so recht, wie...
Hallo
Die Möglichkeit Bilder mit 1x1 px vorzuladen ist anders gemeint.
Du kannst auf einer Seite, die in jedem Fall vor der Seite mit den Bildern aufgerufen wird, diese Bilder mit der Größenangabe 1x1 px, also praktisch unsichtbar einbinden. Dann lädt der Browser die Bilder in den Cache, ohne dass sie auf der Seite zu sehen sind. Beim Aufruf der nächsten Seite holt er diese dann einfach wieder von dort.
Dein Link ist tot: http://riazahn.bei.t-online.de/test/inhalt.html
Eine Testseite finde ich unter: http://riazahn.bei.t-online.de/test/inhalt_vorladen.html
Du hast aber viel größere Probleme als die eventuell etwas verzögert kommenden Grafiken
Schau dir deine Seite doch einmal ohne Javascript an, ob dann noch etwas geht?
Vergrößere spaßeshalber mal die Schrift, was macht dann dein Menü?
MFG
Detlef
Dein Link ist tot: http://riazahn.bei.t-online.de/test/inhalt.html
tut mir leid, ich hatte vergessen, dass ich die wieder runtergeladen hatte, bin mit meinen ganzen testseiten etwas durcheinander gekommen...
Du hast aber viel größere Probleme als die eventuell etwas verzögert kommenden Grafiken
Schau dir deine Seite doch einmal ohne Javascript an, ob dann noch etwas geht?
Nee, da geht nichts mehr, im Moment gehts mir auch erst mal nur darum, dass sie _mit_ Javascript funktioniert, für den Fall, dass JS nicht vorhanden oder deaktiviert ist, habe ich noch eine andere Version.
Vergrößere spaßeshalber mal die Schrift, was macht dann dein Menü?
Das ist etwas, was ich schon öfter gelesen, aber nie wirklich verstanden habe. Wenn ich mit Hilfe von CSS angebe, dass die Schrift zB 8pt groß sein soll, wieso muss ich dann noch berücksichtigen, dass die Schrift dich größer angezeigt werden könnte? Hängt das damit zusammen, dass der Benutzer in seinem Browser evtl. eine Mindestgröße für Schriftarten eingestellt hat oder bestimmten HTML-Tags (zB <h1>) eine feste Schriftgröße zuordnet? Wenn ich da richtig liege, wie kann ich das denn am geschicktesten lösen?
Hallo
Das ist etwas, was ich schon öfter gelesen, aber nie wirklich verstanden habe. Wenn ich mit Hilfe von CSS angebe, dass die Schrift zB 8pt groß sein soll...
8pt ?
Wer sagt, wie groß ein Punkt ist. Pt ist eine Druckangabe, für Internetseiten nicht geeignet.
..., wieso muss ich dann noch berücksichtigen, dass die Schrift dich größer angezeigt werden könnte?
Weil es Leute geben könnte, die vielleicht nicht so gut sehen, einen kleinen Monitor oder eine hohe Auflösung haben oder genau umgekehrt. Gute Browser berücksichtigen das und erlauben es dem Benutzer die Schriftgröße einzustellen.
Hängt das damit zusammen, dass der Benutzer in seinem Browser evtl. eine Mindestgröße für Schriftarten eingestellt...
auch das.
... Wenn ich da richtig liege, wie kann ich das denn am geschicktesten lösen?
Indem Du dich bemühst, die Seiten so zu gestalten, dass diese bei verschiedenen Fenstergrößen, verschiedenen Schriftgrößen, unterschiedlichen Browsern, auch ohne Javascript mindestens benutzbar bleiben, auch wenn das Layout eventuell nicht in jedem Fall perfekt dargestellt werden kann.
Wie du allerdings dein Menü entsprechend anpassen kannst, dabei kann ich dir leider nicht helfen.
Damit habe ich keine Erfahrungen, weil ich solche Menüs nich verwende.
MFG
Detlef