Bilder Cache / Background

Nachrichten zum Thema: Entwicklung

2 Seiten
1
2
→

Bilder Cache / Background

#1 Picard

WinFuturianer

Gruppe: aktive Mitglieder
Beiträge: 125
Beigetreten: 04. Januar 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Puffbohne

geschrieben 12. Juli 2007 - 10:01

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!

MFG

Picard

Nach oben
Nach oben of the page up there ^

#2 dblay

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.246
Beigetreten: 18. März 07
Reputation: 1

geschrieben 12. Juli 2007 - 15:33

schau mal da ... :blush:

<script type="javascript"><!--
var menuBg = new Image();
menuBg.src = "image/menu_bg.jpg";

var menuBgHover = new Image();
menuBgHover.src = "image/menu_bg_hover.jpg";
//--></script>

dann als mouseover:

onmouseover="this.style.background = 'url('+menuBgHover.src+')'";

so müsste es funzen

Zeit ist, was verhindert, dass alles gleichzeitig passiert.

Nach oben
Nach oben of the page up there ^

#3 Picard

WinFuturianer

Gruppe: aktive Mitglieder
Beiträge: 125
Beigetreten: 04. Januar 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Puffbohne

geschrieben 12. Juli 2007 - 22:36

Wow coole idee werde es testen und melde mich.
Klappt aber erst morgen.

Wie sieht es mit den Browser aus?
Klappt dies bei beiden?

MFG

Picard

Nach oben
Nach oben of the page up there ^

#4 Picard

WinFuturianer

Gruppe: aktive Mitglieder
Beiträge: 125
Beigetreten: 04. Januar 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Puffbohne

geschrieben 12. Juli 2007 - 23:05

So konnte es nicht abwarten.
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.

DANKE!!!

Gute Nacht <_<

MFG

Picard

Nach oben
Nach oben of the page up there ^

#5 Picard

WinFuturianer

Gruppe: aktive Mitglieder
Beiträge: 125
Beigetreten: 04. Januar 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Puffbohne

geschrieben 13. Juli 2007 - 05:51

Also habe es jetzt an einen anderen Rechner probiert klappt nicht so ganz.
Bei mir funktionierte es.

Hast du noch eine Idee?

MFG

Picard

Nach oben
Nach oben of the page up there ^

#6 Diewie

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 409
Beigetreten: 18. Juni 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Geisenhausen / München

geschrieben 13. Juli 2007 - 09:31

Hi,

versuchs mal damit:

<html>
<head>
<script language="JavaScript">
<!--
function BildPrecache()
{
	document.Precache = new Array();

	if(document.images)
	{
		for(var i = 0; i < BildPrecache.arguments.length; i++)
		{
			document.Precache[i] = new Image();
			document.Precache[i].src = BildPrecache.arguments[i];
		}
	}
}
//-->
</script>
</head>
<body onLoad="BildPrecache('image/menu_bg.jpg','image/menu_bg_hover.jpg');">

</body>
</html>

Am besten ist es, wenn du es bereits auf einer anderen Seite vorlädst, dann geschieht das alles im Hintergrund und der User merkt keinerlei Verzögerung. Wenn du es auf direkt auf der Seite mit der Tabelle lädst dann reicht onLoad="BildPrecache('image/menu_bg_hover.jpg');" aus.

Gruß,
Stefan

Nach oben
Nach oben of the page up there ^

#7 dblay

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.246
Beigetreten: 18. März 07
Reputation: 1

geschrieben 13. Juli 2007 - 09:56

@Diewie: das nenn ich mal ne coole idee!!

Picard sagte:

Also habe es jetzt an einen anderen Rechner probiert klappt nicht so ganz.

es müsste eigentlich funktionieren. sowohl mein beispiel, als auch das von Diewie. kann höchstens sein, dass auf dem anderen rechner das image-objekt von javascipt nicht unterstützt wird.

Zeit ist, was verhindert, dass alles gleichzeitig passiert.

Nach oben
Nach oben of the page up there ^

#8 Picard

WinFuturianer

Gruppe: aktive Mitglieder
Beiträge: 125
Beigetreten: 04. Januar 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Puffbohne

geschrieben 13. Juli 2007 - 13:31

ja das ist nicht mein Rechner.
Das Menü flackert immer egal ob es schon einmal geladen war oder nicht.
Ich hatte das an meinen eigenen auch und als ich dein Script probiert hatte war es weg nur an diesen einen Rechner nicht.

Vielleicht liegt es auch an dem!

MFG

Picard

Nach oben
Nach oben of the page up there ^

#9 dblay

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.246
Beigetreten: 18. März 07
Reputation: 1

geschrieben 13. Juli 2007 - 21:20

na wenn du sagst, dass es an dem anderen rechner immer flackert, dann wird's wohl so sein, dass es an dem rechner liegt.

das script weißt jedenfalls keine fehler auf :wink:

Zeit ist, was verhindert, dass alles gleichzeitig passiert.

Nach oben
Nach oben of the page up there ^

#10 Picard

WinFuturianer

Gruppe: aktive Mitglieder
Beiträge: 125
Beigetreten: 04. Januar 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Puffbohne

geschrieben 26. Juli 2007 - 08:20

Also doch nicht am Rechner!!!
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!

MFG

Picard

Nach oben
Nach oben of the page up there ^

#11 Diewie

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 409
Beigetreten: 18. Juni 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Geisenhausen / München

geschrieben 26. Juli 2007 - 09:48

Hallo,

das ist wohl ein spezifisches Caching Problem vom IE6. Mit dem SP1 vom IE6 kann das jedoch durch JS gefixt werden. (http://support.microsoft.com/default.aspx?...Ben-us%3B823727)

<script>
	
(function(){

	/*Use Object Detection to detect IE6*/
	var  m = document.uniqueID /*IE*/
	&& document.compatMode  /*>=IE6*/
	&& !window.XMLHttpRequest /*<=IE6*/
	&& document.execCommand;
	
	try{
		if(!!m){
			m("BackgroundImageCache", false, true) /* = IE6 only */ 
		}
		
	}catch(oh){};
})();
</script>

Quelle: http://www.hedgerwow.com/360/bugs/dom-fix-...ge-flicker.html

Schau mal, ob es so im IE6 problemlos funktioniert.

Gruß,
Stefan

Nach oben
Nach oben of the page up there ^

#12 dblay

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.246
Beigetreten: 18. März 07
Reputation: 1

geschrieben 26. Juli 2007 - 10:07

hmmm... das ist mir neu. bis jetzt hat das bei mir auch im ie6 immer funktioniert .... aber andererseits - wer hat eigentlich noch den ie6?

Zeit ist, was verhindert, dass alles gleichzeitig passiert.

Nach oben
Nach oben of the page up there ^

#13 Picard

WinFuturianer

Gruppe: aktive Mitglieder
Beiträge: 125
Beigetreten: 04. Januar 06
Reputation: 0
Geschlecht:Männlich
Wohnort:Puffbohne

geschrieben 26. Juli 2007 - 10:28

Naja aber es soll ja benutzerfreundlich sein und wenn jemand auf die seite geht und den älteren Browser hat sollte dies schon schön aussehen.

Versteh nicht warum das nicht funzt? Lokal geht es auch um IE6 nur Online nicht.

MFG

Picard

Nach oben
Nach oben of the page up there ^

#14 dblay

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.246
Beigetreten: 18. März 07
Reputation: 1

geschrieben 26. Juli 2007 - 10:30

hm ... ist wohl ie6 ... vllt kann man da ja gar nix machen. hast du schon mal Stefans vorschlag ausprobiert? geht es damit auch nicht? ich mein, notfalls flackert es eben im ie6, da wird schon keiner dran sterben

Zeit ist, was verhindert, dass alles gleichzeitig passiert.