Benjamin S.: Grafik im Hintergrund laden?!

Hallo Leute!

Ich möchte auf eine Website ein Grafik stellen, die ca. 70kb (trotz härtester Komprimierung) groß ist.
Ich suche derzeit eine Möglichkeit wie ich das Laden dieser Grafik beschleunigen kann.
Da diese Grafik in einer zweiten Datei liegt, auf die nach der index.html verwiesen wird, hätte ich gerne daß, während man den Text auf der ersten Seite ließt, die Grafik im Hintergrund geladen wird oder zumindest irgendwie in den Browser-Cache gelangt.

Derzeit habe ich dafür nur eine improvisierte Lösung (Manchmal sind die ja am besten). Ich erstelle einen Frame mit unsichtbaren unverschiebarem Rahmen, dessen Größe bei 1 Pixel liegt. Weiter innen in dem Frame lade ich die Grafik, wo sie nicht mehr sichtbar ist.

Kennt jemand dafür vielleicht eine professionellere Lösung?

Vielen Dank im voraus, Tschö Benjamin

  1. Hi,

    Derzeit habe ich dafür nur eine improvisierte Lösung (Manchmal sind die ja am besten). Ich erstelle einen Frame mit unsichtbaren unverschiebarem Rahmen, dessen Größe bei 1 Pixel liegt. Weiter innen in dem Frame lade ich die Grafik, wo sie nicht mehr sichtbar ist.

    Kennt jemand dafür vielleicht eine professionellere Lösung?

    nein, diese Lösung hat sich aber schon relativ "eingebürgert". Wenn Du allerdings auf den Frame verzichten möchtest, kannst Du die Grafik auch auf der index.html als 1x1-Pixel großes <img> einbauen.

    Cheatah

    1. Hallo!

      nein, diese Lösung hat sich aber schon relativ "eingebürgert". Wenn Du allerdings auf den Frame verzichten möchtest, kannst Du die Grafik auch auf der index.html als 1x1-Pixel großes <img> einbauen.

      Nach meiner Erfahrung ist es von Vorteil, wenn man versteckte Grafiken immer am Ende der Seite einbaut. Damit verhindert man das nichtladen von anderen Elementen. Diesen Effekt kann man meist bei Coutern beobachten, die am Anfang der Seite eingebaut sind! Wenn der Counter langsam geladen wird, stört das bei laden der anderen Elemente.
      Der Text ist da, das Bild wird aber noch geladen

      Bis dann, André

    2. Hi Benjamin & Cheatah,

      nein, diese Lösung hat sich aber schon relativ "eingebürgert". Wenn Du allerdings auf den Frame verzichten möchtest, kannst Du die Grafik auch auf der index.html als 1x1-Pixel großes <img> einbauen.

      Für die 4er Browser kannst du das 1x1 Pixel kleine Bild auch noch durch ein Style Sheet auf unsichtbar setzen. Ältere Browser ignorieren dies einfach, stellen dann das Bild  zwar sichtbar aber eben nur als winzigen Punkt dar.

      <DIV STYLE="position:relative; visibility:hidden">
      <IMG SRC="unsichtbar.gif"  WIDTH=1 HEIGHT=1>
      </DIV>

      Eine elegante Lösung ist auch die Aufnahme des Bildes in ein JavaScript-Array auf der vorhergehenden Index-Seite. Damit wird das Bild im Hintergrund geladen, ohne daß es in irgendeiner Form auf der Indexseite erscheint. Funktioniert aber erst mit Browsern der 3.Generation außer IE, dort erst ab Version 4.

      <HEAD>
      <SCRIPT LANGUAGE="JavaScript">
      function vorladen()
      {
      if(document.images)
      {
      bigpicture = new Image();
      bigpicture.src = "unsichtbar.gif";
      }
      }
      </SCRIPT>
      </HEAD>
      <BODY onLoad="vorladen()">
      </BODY>

      Dieser Code sollte auf der Indexseite eingefügt werden. Durch den Aufruf im Handler onLoad wird erreicht, daß die Index-Seite erstmal unabhägig von der Grafik im Hintergrund geladen wird und erst wenn die Indexseite vollständig ist mit dem Laden der Grafik im Hintergrund begonnen wird. Die Grafik ist dann im Cache und steht beim Aufruf der nächsten Seite sofort zur Verfügung.

      Tschau Ralph.

      1. Eine elegante Lösung ist auch die Aufnahme des Bildes in ein JavaScript-Array auf der vorhergehenden Index-Seite.

        Nachtrag:

        Entspricht dem, was Stefan kurz nach mir gepostet hat. Daraufhin bin ich gleich noch über einen kleinen Fehler in meinem Beitrag gestoßen. Also der Begriff Array ist hier fehl am Platze, es ist wie Stefan schreibt ein neues Image-Objekt. War gestern schon spät... Ich bitte um Vergebung ;-)

  2. Die anderen Loesungen sind durchaus ueblich, aber Du kannst natuerlich auch deine Seite auf DHTML umstellen und den Layer mit dem Bild ans Ende stellen und erstmal unsichtbarmachen

  3. Hallo Benjamin

    Ich möchte auf eine Website ein Grafik stellen, die ca. 70kb (trotz härtester Komprimierung) groß ist.
    Ich suche derzeit eine Möglichkeit wie ich das Laden dieser Grafik beschleunigen kann.
    Da diese Grafik in einer zweiten Datei liegt, auf die nach der index.html verwiesen wird, hätte ich gerne daß, während man den Text auf der ersten Seite ließt, die Grafik im Hintergrund geladen wird oder zumindest irgendwie in den Browser-Cache gelangt.

    Dazu kannst Du in der ersten Datei ruhig die JavaScript-Funktionalitaet zum "Vorladen" einer Grafik benutzen (Prinzip siehe z.B. <../../tedg.htm> - du brauchst nur das Laden der Grafik via image-Objekt im Dateikopf-Script, sonst nix). Wenn Du Glueck hast, verweilt der Anwender lange genug auf der ersten Seite, sodass die Grafik in der Zwischenzeit durch die JavaScript-Befehle geladen wurde. Dadurch ist die Grafik auch im Cache. Bei einer naechsten Seite, die diese Grafik ganz normal per <img>-Tag referenziert, ist sie dann im Idealfall sofort da.
    Getestet hab ich das aber noch nicht...

    viele Gruesse
      Stefan Muenz