Code, um Bilder nacheinander einzublenden

  • Hallo zusammen,


    um meine wichtigsten Links zusammen zu fassen, habe ich mir fürs Handy eine Link-Seite zusammengebastelt (beim K800i sah das SO aus).


    Nun baue ich die Seite fürs kommende E66 neu. Wegen der neuen Möglichkeit des Bildschirm-Drehens durch den Lagesensor soll die Seite 12 Icons bekommen. Im Hochformat werden 3 nebeneinander in 4 Reihen angezeigt, im Querformat 4 nebeneinander in 3 Reihen.
    Das ist ja an sich kein Ding, einfach alle in passender Größe nacheinander, den Zeilensprung macht das Handy selbst.


    Nun das Problem: Wird die Seite geöffnet, laden die 12 Bilder der Icons wild nacheinander. Meist erst 2-3, bis dann die anderen auf einmal da sind (getestet mit E51, hat ja den gleichen Browser). Das sieht nicht gerade toll aus, das möchte ich gern ändern.


    Und dazu die Frage: Ich möchte, dass erst das erste Icon geladen wird. Dann nach zum Beispiel einer fünftel-Sekunde soll das zweite Bild angezeigt werden, nach einer weiteren fünftel-Sekunde das dritte Icon. So lange, bis alle Icons da sind (also nach ca. zweieinhalb Sekunden).
    Gibt es da einen HTML-Code, dass ein Bild nicht sofort, sondern erst nach einer gewissen Zeit angezeigt wird?


    Ich kenne mich bei HTML leider nur mit den Grundkenntnissen aus, da das Thema für eine so kleine Nutzung doch sehr groß ist ...


    Danke für eure Hilfe bereits im Voraus :-)

  • Hallo,


    falls du dein Problem noch nicht gelöst hast:


    also in HTML gibt es dafür keine Möglichkeiten. HTML kümmert sich ja nur um die reine Darstellung.


    Um so etwas mit Zeitverzögerung zu laden, müsstest du irgendeine Skriptsprache wie JavaScript oder PHP verwenden. Die Frage ist dann, ob du dich da selber reinwerkeln willst, oder ob du lieber nach einem fertigen Skript suchst. Im Netz gibt es ja kiloweise Seiten mit fertigen Sachen. Vielleicht findest du da etwas passendes, dass sich anpassen lässt.


    Sonst hilft nur damit leben...


    Schöne Grüße


    scarabea

  • Ich habe das Problem noch nicht gelöst und danke für deine Hinweise.


    Mit javascript und PHP habe ich mich bisher nicht wirklich beschäftigt und weiß nicht, ob ich das alles verstehe, wenn mir der Hintergrund und der notwendige Zweck dafür fehlt. Am Ende bleibts wie es ist, vielleicht habe ich später einen etwas besseren Einblick.

  • Hm ganz einfach ist das nicht, Du müsstest einen Preloader umbauen damit die Bilder gezielt geladen werden. Probiere aber mal Deinen Bilder feste Größenangaben zu geben dann weiß der Browser immerhin schonmal wie die Seite aussehen soll. Dann müssten eigentlich alle Bilder an der richtigen Stelle stehen, auch wenn sie erst nacheinander fertig geladen sind.


    Was auch was bringen könnte wären z.B. Gifs die sich nicht erst zeigen wenn sie komplett übertragen wurden sondern schon während des Ladevorgangs angezeigt werden (dann halt noch dementsprechend pixelig). Mit fällt grad die direkte Option beim abspeichern nicht ein, progressive oder so?

  • Es ist nicht so, dass jetzt zum Beispiel erst eines der letzten Bilder geladen wird und dieses dann Stück für Stück weiter nach hinten rutscht. Sondern es geht schon der Reihe nach. Sieht aber eben so "ungeplant" aus. Aber unterm Strich geht es, war nur so ne Idee. Je umfangreicher die Seite dann ist, desto länger braucht das Handy dann ja auch zum laden. Es ist und bleibt aber eine einfach Link-Seite.


    Die Größenangaben habe ich absichtlich rausgenommen, weil vorher Platzhalter angezeigt wurde, die noch hässlicher aussahen *g*
    Die einzelnen Icons sind als PNG gespeichert und direkt auf der Speicherkarte. Einen großen Ladevorgang gibt es daher nicht, das umspeichern in gif mit nach-und-nach-Aufbau beim Laden bringt daher nichts.


    Da es leider keinen einfach HTML-Code gibt, wie man ihn zum Beispiel für Farbe hat, ist meine Idee nun als "erstmal nicht umsetzbar" gestorben, aber das ist nicht so tragisch.


    Dennoch danke! :-)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!