Daniel N.: nicht angezeigte Bilder *nicht* laden

Hallo,

ich möchte erreichen, dass ich einige Bilder in einem HTML-Dokument auszeichne, die *nicht* vom Browser geladen werden!

also irgendiwe so:

  
<div class="doNotLoad">  
  <img src="bild1" "Mein erstes Bild" />  
  <img src="bild2" "Mein zweites Bild" />  
</div>  

Ich möchte diese Bilder zu einem *späteren* Zeitpunkt per javascript anzeigen. Damit nicht *alle* Bilder direkt zu *anfang* geladen werden, möchte ich verhindern, dass dies der Browser tut! Ich möchte den Zeitpunkt selber bestimmen, wann die Bilder geladen werden!

Habt ihr eine Idee?

display:none und/oder visiblility:hidden "funktionieren" hier nicht.

Übrigens: Dass ich die URLs zu den Bildern auch im Javascript hinterlegen kann und diese dann nicht geladen werden ist mir natürlich klar!
Ich halte es allerdings für sinnvoller, die Bilder als Bestandteil des Markups zu notieren, da diese ja Bestandteil der Seite sind und es nur eine *Darstellungssache* ist, wann und wie diese Bilder angezeigt werden! (Außerdem muss ich mir dann keine neue Syntax überlegen, um Bilder auszuzeichnen).

Bin auf eurer Antworten gespannt, viele Grüße
Daniel :-)

  1. ich möchte erreichen, dass ich einige Bilder in einem HTML-Dokument auszeichne, die *nicht* vom Browser geladen werden!

    Warum?

    Beschreibe vor allem dein Ziel und nicht einen der möglichen Lösungswege.

    Ich möchte diese Bilder zu einem *späteren* Zeitpunkt per javascript anzeigen. Damit nicht *alle* Bilder direkt zu *anfang* geladen werden, möchte ich verhindern, dass dies der Browser tut! Ich möchte den Zeitpunkt selber bestimmen, wann die Bilder geladen werden!

    Wozu? Für ein Rollover/Hover auf einem grafischen Menü? Da gäbe es bessere Methoden.

    display:none und/oder visiblility:hidden "funktionieren" hier nicht.

    Wieso?

    Das hängt vom Browser ab - afaik laben einige Browser Bilder die initial display: none; aufweisen nicht (er setzt keinen HTTP-Request ab - wozu auch).

    Ebenso wäre es unsinnig, Bilder zu laden deren visibility auf "hidden" steht, aber deren Dimensionen durch die width- und height-Attribute bekannt sind.

    1. Warum?

      Das habe ich weiter unten beschrieben!

      "Ich möchte diese Bilder zu einem *späteren* Zeitpunkt per javascript anzeigen. Damit nicht *alle* Bilder direkt zu *anfang* geladen werden, möchte ich verhindern, dass dies der Browser tut! Ich möchte den Zeitpunkt selber bestimmen, wann die Bilder geladen werden!"

      Beschreibe vor allem dein Ziel und nicht einen der möglichen Lösungswege.

      Das ist mein Ziel und ich habe nach einer möglichen Lösung gefragt!

      Wozu? Für ein Rollover/Hover auf einem grafischen Menü? Da gäbe es bessere Methoden.

      Nein, dafür nicht, s.o.

      Das hängt vom Browser ab - afaik laben einige Browser Bilder die initial display: none; aufweisen nicht (er setzt keinen HTTP-Request ab - wozu auch).

      Gibt es dazu eine Liste, wie sich dir Browser verhalten? Mein Firefox (3.0) lädt immer alles?!

      Viele Grüße
      Daniel

      1. Hallo Daniel,

        "Ich möchte diese Bilder zu einem *späteren* Zeitpunkt per javascript anzeigen. Damit nicht *alle* Bilder direkt zu *anfang* geladen werden, möchte ich verhindern, dass dies der Browser tut! Ich möchte den Zeitpunkt selber bestimmen, wann die Bilder geladen werden!"

        du kannst das Bild per createElement erzeugen und dann sein src-Attribut setzen.

        Gruß, Jürgen

        1. Hi Jürgen,

          wie gesagt, dass ich image-Elemente mit javascript erzeugen kann, ist mir durchaus bewusst.

          Ich fände es aber passender, wenn ich die Bilder im HTML-Dokument auszeichen könnte und mittels css und/oder javascript verhindern könnte, dass diese *sofort" angezeigt *und* geladen werden.

          Viele Grüße
          Daniel

          1. wie gesagt, dass ich image-Elemente mit javascript erzeugen kann, ist mir durchaus bewusst.
            Ich fände es aber passender, wenn ich die Bilder im HTML-Dokument auszeichen könnte und mittels css und/oder javascript verhindern könnte, dass diese *sofort" angezeigt *und* geladen werden.

            Du suchst also ein <img dissabled>  oder so was?
            Gibt es nicht.

            mfg Beat

            --
            ><o(((°>           ><o(((°>
               <°)))o><                     ><o(((°>o
            Der Valigator leibt diese Fische
            1. Du suchst also ein <img dissabled>  oder so was?
              Gibt es nicht.

              Ja, sowas in der Art! Schade.

              @Jürgen:
              Sowas in der Richtung werde ich mal versuchen, in prototype müsste es ein "document:ready"-Event geben, das feuert, bevor alle Bilder geladen worden sind.

              Viele Grüße und vielen Dank
              Daniel

              1. Sowas in der Richtung werde ich mal versuchen, in prototype müsste es ein "document:ready"-Event geben, das feuert, bevor alle Bilder geladen worden sind.

                in jQuery existiert z.B. $(document).ready() - allerdings benötigt das ausführen des Scripts auch seine Zeit, dh die Seite "springt" dann im schlimmsten Fall.

                Besonders bei langsamen Browsern wie Safari unter Windows[1] kann man hier eine halbe Sekunde bis Sekunde beobachten, bis das Zeug ausgeführt wird.

                [1] Ja, auch wenn Apple sagt, Safari wäre sehr schnell - Safari 3 ist in Kombination mit jQuery nicht grade eine Rakete - Opera 8 aufwärts oder Firefox 3 sind Subjektiv um einiges schneller.

          2. Hallo Daniel,

            ungetestete Idee: du könntest per ondomload (mal danach suchen) oder in einem Script direkt unter den Bildern deren src zwischenspeichern und durch einen Dummy (1 Pixel transparent) ersetzen. Onload geht nicht, da dieses Event erst feuert, wenn alles einschließlich Bildern geladen ist.

            Gruß, Jürgen

      2. » Warum?
        Das habe ich weiter unten beschrieben!

        Nein hast du nicht, du sagst die ganze Zeit immer nur was du willst, aber nicht warum.

        Für Aussenstehende erschließt sich nicht, warum du ein Bild in's HTML einfügen willst obwohl es ganz offensichtlich nicht zum Inhalt gehört. Und du kannst durchaus auch einem Nachträglich eingefügtem Bild z.b. eine CSS Klasse geben, wo ist also das Problem?

        Struppi.

        1. Nein hast du nicht, du sagst die ganze Zeit immer nur was du willst, aber nicht warum.

          Doch, hab ich wohl ;-)

          Für Aussenstehende erschließt sich nicht, warum du ein Bild in's HTML einfügen willst obwohl es ganz offensichtlich nicht zum Inhalt gehört.

          Ich sagte bereits mehrmals: Eben *weil* es zum Inhalt gehört, möchte ich die Bilder im HTML notieren!
          Es ist eine *Darstellungssache*, wann und wie ich das Bild anzeige! Alle Bilder gehören aber definitiv zum Inhalt des Dokuments, s.o.

          "Beweis": Wenn ich CSS und Javascript ausschalte, müssen alle Bilder angezeigt werden, da sie zum Dokument gehören.

          Ich versuche in meiner Beschreibung mein Problem auf das Wesentliche zu beschränken, damit man es leicht nachvollziehen kann!

          Nochmal mein Vorhaben:

          • ein HTML-Dokument mit Text und Bildern
          • per CSS "angereichert" mit Javascript eine Darstellung herstellen, die
              nicht alle Bilder *gleichzeitig" darstellt.
          • diese Lösung in der Form optimieren, dass nicht alle Bilder direkt geladen
              werden, sondern erst bei Bedarf (lazy loading).
              (Performance, Serverlast,...)

          Viele Grüße
          Daniel

      3. Hi,

        Gibt es dazu eine Liste, wie sich dir Browser verhalten? Mein Firefox (3.0) lädt immer alles?!

        AFAIK: Nein.

        Opera lädt wohl nicht - mindestens die Mobil-Version, wie das Nichtladen generell bei Mobilbrowsern (bzw. zwischengeschalteten Proxies) zu finden ist (wg. der oft beschränkten Bandbreite/Kapazitäten).

        Gruß, Cybaer

        --
        Zweck des Disputs oder der Diskussion soll nicht der Sieg, sondern der Gewinn sein.
        (Joseph Joubert, Schriftsteller)