Bild Cachen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bild Cachen

    Hi,

    ich habe eine Tabelle wo ich die Background Grafiken von der Tabelle neu lade bei MouseOver.
    Aber leider gibt dies eine Verzögerung und es erscheint kurz weiß bevor die neue Grafik geladen wird.
    Kann man dies vorher cachen damit der Browser die Grafik im Cache hat und diese Verzögerung nicht kommt?

    Weil lokal auf dem Rechner merkt man dies nicht weil das laden nicht so ist wie im Netz!

    PHP-Code:
    onmouseover="
    document.getElementById('menu').style.background='url(image/menu_bg_hover.jpg)';
    this.style.color='#0000C4'" 
    onmouseout="
    document.getElementById('menu').style.background='url(image/menu_bg.jpg)';
    this.style.color='#9C0000'" 
    Hat jemand eine Idee?

    Danke schöööön!
    Zuletzt geändert von Picard_Jean-Luc; 13.07.2007, 00:11.

  • #2
    wenn du den ie meinst, imho keine chance. der läd die background-images immer neu. da hilft selbst kein preloader. hatte das problem selber mal und keine lösung gefunden. du kannst nur die dateigröße der bilder so klein wie möglich halten.

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Misst, das gibts doch nicht...schade das es da keine Lösung gibt.
      Naja vielleicht hat ja jemand noch eine.
      Habe die Dateien schon unter 1KB aber nützt nix.
      Habe ein Menü und das flackert kurz.

      So ein misst....

      Danke dir für deine schnelle Antwort!



      MFG

      Kommentar


      • #4
        @Picard_Jean-Luc: Regeln lesen, Code umbrechen!


        Gängiger Workaround: Beide "Zustände" in ein Bild packen, und dann background-position nutzen.
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar


        • #5
          Habe ihn doch schon umgebrochen...naja ok werde ich beachten!

          Ich glaub ich weiß was du meinst, muss mal sehen wie ich es umsetze.
          Also beide Bilder in ein Bild und mit Style nur die Pos. hin und her schieben.

          Oder?

          Kommentar


          • #6
            Also beide Bilder in ein Bild und mit Style nur die Pos. hin und her schieben.
            genauuuuu. übrigengs eine genial einfache idee. warum bin ich damals nicht selber darauf gekommen?
            Habe ihn doch schon umgebrochen
            trotzdem muss man bei einer auflösung unter 1600x1200 horizontal scrollen. also bitte code umbrechen.

            gruß
            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              genauuuuu. übrigengs eine genial einfache idee. warum bin ich damals nicht selber darauf gekommen?
              OffTopic:
              Vielleicht weil du nicht an Texturen gedacht hast?
              Die Regeln | rtfm | register_globals | strings | SQL-Injections | [COLOR=silver][[/COLOR][COLOR=royalblue]–[/COLOR][COLOR=silver]][/COLOR]

              Kommentar


              • #8
                Irgendwie klappt das nicht.

                Habe jetzt ein bild wo z.b. 3 Zustände sind.

                Also 3 Streifen mit jeweils 1 Pixel Breit.
                Also ist das Bild 3 Pixel breit.

                So der 1. Streifen ist z.B. ROT der 2. BLAu und der 3. GELB

                Wie mache ich es jetzt das ich mit css so definiere das ich eine
                Spalte habe und der mir nur das Rot ausfüllt und erst
                wenn ich es will das gelb oder blau.

                Habe es so probiert aber klappt nicht.
                Er zeigt mir immer das komplette billd:

                PHP-Code:
                style="background-repeat:repeat-x;
                background-image:url(image/menu_image.jpg);
                background-position: 1px"

                oder (weil hoch 21)

                style="background-repeat:repeat-x;
                background-image:url(image/menu_image.jpg);
                background-position: 1px 21px"

                oder

                style
                ="background-repeat:repeat-x;
                background-image:url(image/menu_image.jpg);
                background-position: 1px 2px" 
                kann mir jemand noch weiterhelfen?

                Kommentar


                • #9
                  Hi,

                  damit scheint es auch einwandfrei zu funktionieren!

                  PHP-Code:
                  var menuBg = new Image();
                  menuBg.src "image/menu_bg.jpg";

                  var 
                  menuBgHover = new Image();
                  menuBgHover.src "image/menu_bg_hover.jpg";

                  onmouseover="this.style.background = 'url('+menuBgHover.src+')'"
                  Also bis jetzt funktioniert dies sehr sehr gut.
                  habe jeweils im IE und im Firefox den Cache gelöscht und die Seite neu geladen
                  und hat sehr gut funktioniert.

                  Dennoch würde ich noch gerne wissen wie das mit CSS zu lösen ist.

                  Gute Nacht!


                  MFG

                  Picard

                  Kommentar


                  • #10
                    Hmm....habe mich getäuscht. Klappt doch nicht so ganz.

                    Hat jemand noch eine Idee? Eventuell wie ich oben beschrieben mit CSS?

                    Kommentar


                    • #11
                      Kann man es nicht umgehen, in dem man dieses Bild irgendwo als 1px bild vor der eigentlichen ausgabe schon mal vorlädt?

                      Kommentar


                      • #12
                        Original geschrieben von Picard_Jean-Luc
                        Irgendwie klappt das nicht.

                        Habe jetzt ein bild wo z.b. 3 Zustände sind.

                        Also 3 Streifen mit jeweils 1 Pixel Breit.
                        Also ist das Bild 3 Pixel breit.

                        So der 1. Streifen ist z.B. ROT der 2. BLAu und der 3. GELB

                        Wie mache ich es jetzt das ich mit css so definiere das ich eine
                        Spalte habe und der mir nur das Rot ausfüllt und erst
                        wenn ich es will das gelb oder blau.

                        Habe es so probiert aber klappt nicht.
                        Er zeigt mir immer das komplette billd:

                        PHP-Code:
                        style="background-repeat:repeat-x;
                        background-image:url(image/menu_image.jpg);
                        background-position: 1px"

                        oder (weil hoch 21)

                        style="background-repeat:repeat-x;
                        background-image:url(image/menu_image.jpg);
                        background-position: 1px 21px"

                        oder

                        style
                        ="background-repeat:repeat-x;
                        background-image:url(image/menu_image.jpg);
                        background-position: 1px 2px" 
                        kann mir jemand noch weiterhelfen?
                        du hast nur farbige flächen und willst das mit bildern lösen???
                        das würd ich überdenken
                        Die Milch bleibt ranzig!

                        Kommentar


                        • #13
                          Hi,

                          sorry das ich mich so spät melde. Irgendwie habe ich die Mail nicht gesehen.

                          Also, das sind nicht nur farbige flächen. Die Bilder haben ein übergang.

                          Kann mir jemand erklären wie man so etwas mit background-position
                          löst?

                          Oder anders? Wie gesagt bei manchen Rechnern klappt es und manchmal nicht.

                          Viel Dank,

                          MFG

                          Kommentar


                          • #14
                            Nachtrag:

                            Dies tritt nur beim IE6 auf der Fehler. Bei anderen Browsern super:
                            Hier is noch einmal der komplette Quelltext:

                            PHP-Code:

                             
                            <td width="753" height="21" align="center" valign="middle" id="menu" background="image/menu_bg.jpg">

                                     <
                            table align="center" cellpadding="0" cellspacing="0">
                                     <
                            tr>
                                      <
                            td class="menu_text" onmouseover="document.getElementById('menu').style.background='url('+menuBgHover.src+')';
                            this.style.color='#0000C4'" 
                            onmouseout="document.getElementById('menu').style.background='url('+menuBg.src+')';
                            this.style.color='#9C0000'"
                            >Home</td>
                                      <
                            td class="menu_text" onmouseover="document.getElementById('menu').style.background='url('+menuBgHover2.src+')';
                            this.style.color='#0000C4'" 
                            onmouseout="document.getElementById('menu').style.background='url('+menuBg.src+')';
                            this.style.color='#9C0000'"
                            >Design</td>
                                      <
                            td class="menu_text" onmouseover="document.getElementById('menu').style.background='url('+menuBgHover3.src+')';
                            this.style.color='#0000C4'" 
                            onmouseout="document.getElementById('menu').style.background='url('+menuBg.src+')';
                            this.style.color='#9C0000'"
                            >Service</td>
                                      <
                            td class="menu_text" onmouseover="document.getElementById('menu').style.background='url('+menuBgHover2.src+')';
                            this.style.color='#0000C4'" 
                            onmouseout="document.getElementById('menu').style.background='url('+menuBg.src+')';
                            this.style.color='#9C0000'"
                            >Kontakt</td>
                                      <
                            td class="menu_text" onmouseover="document.getElementById('menu').style.background='url('+menuBgHover.src+')';
                            this.style.color='#0000C4'" 
                            onmouseout="document.getElementById('menu').style.background='url('+menuBg.src+')';
                            this.style.color='#9C0000'"
                            >Referenzen</td>
                                      <
                            td class="menu_text" onmouseover="document.getElementById('menu').style.background='url('+menuBgHover3.src+')';
                            this.style.color='#0000C4'" 
                            onmouseout="document.getElementById('menu').style.background='url('+menuBg.src+')';
                            this.style.color='#9C0000'"
                            >Impressum</td>
                                     </
                            tr>
                                     </
                            table>
                             </
                            td
                            Und das Script gehört noch dazu um die Bilder zu cachen:

                            PHP-Code:
                            var menuBg = new Image();
                            menuBg.src "image/menu_bg.jpg";

                            var 
                            menuBgHover = new Image();
                            menuBgHover.src "image/menu_bg_hover.jpg";

                            var 
                            menuBgHover2 = new Image();
                            menuBgHover2.src "image/menu_bg_hover2.jpg";

                            var 
                            menuBgHover3 = new Image();
                            menuBgHover3.src "image/menu_bg_hover3.jpg"
                            Vielleicht kann mir noch jemand einen Tipp geben wie man
                            es besser machen kann. Das problem ist das ich
                            von der übergeordneten Tabelle den Backgournd ändere.

                            DANKE!

                            Kommentar


                            • #15
                              Habe es auch noch einmal damit probiert aber funktioniert auch nicht.
                              Dies sollte angeblich den Bug im IE6 beheben.

                              Code:
                              <script type="text/javascript">
                              <!--
                              try {
                                  document.execCommand("BackgroundImageCache", false, true);
                              } catch(err) {}
                              //-->
                              </script>
                              So ein misst....

                              Kommentar

                              Lädt...
                              X