Bild Cachen

[Picard_Jean-Luc]

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!

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!

[Kropff]

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

[Picard_Jean-Luc]

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

[wahsaga]

@Picard_Jean-Luc: Regeln lesen, Code umbrechen!


Gängiger Workaround: Beide "Zustände" in ein Bild packen, und dann background-position nutzen.

[Picard_Jean-Luc]

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?

[Kropff]

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

[tontechniker]

genauuuuu. übrigengs eine genial einfache idee. warum bin ich damals nicht selber darauf gekommen?

OffTopic:

---

Vielleicht weil du nicht an Texturen gedacht hast?

---

[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:

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?

[Picard_Jean-Luc]

Hi,

damit scheint es auch einwandfrei zu funktionieren!

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

[Picard_Jean-Luc]

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

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

[archie]

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

[RanzigeMilch]

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:

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

[Picard_Jean-Luc]

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

[Picard_Jean-Luc]

Nachtrag:

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

 <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:

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!

[Picard_Jean-Luc]

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

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

So ein misst....