nicht angemeldet
Browser hängt nach dem Zeichen von vielen Pixeln
Hallo,
ich hab kniffeliges Problem, wofür ich keine Lösung habe. Bei Rechnern mit kleinen Grafikkarten, hängt der Aufbau der Seite. Bei einem guten Rechner klappt das problemlos. Es gibt sowohl Probleme mit IE als auch mit NS.
Für einen Rat, wie das Problem zu lösen ist, wäre ich super dankbar.
Gruß Karsten
Anbei eine Testseite, die das Problem zeigt:
<html>
<head>
<script language="JavaScript">
<!--
function showPixel(){
var cg;
for(var iy = 20; iy <= 100; iy+=1)
for(var ix =1; ix <= 70; ix+=1)
{
cg=(Math.round(255*Math.random()));
document.write("<div style='position:absolute;left:"+ix+";top:"+iy+";color:"+cg+";'>.</div>");
}
}
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
document.open();
showPixel();
document.close();
//-->
</script>
Hallo, dies ist ein Test. Warum dauert die Ausgabe dieses Textes so lange?
</body>
</html>
-
Hi,
for(var iy = 20; iy <= 100; iy+=1)
for(var ix =1; ix <= 70; ix+=1)
{
cg=(Math.round(255*Math.random()));
document.write("<div style='position:absolute;left:"+ix+";top:"+iy+";color:"+cg+";'>.</div>");[...]
Hallo, dies ist ein Test. Warum dauert die Ausgabe dieses Textes so lange?
Weil Du vorher immerhin ca. 5600 divs erzeugst, bei jedem muß 3 mal die Fehlerkorrekturroutine eingreifen, weil immerhin 3 von 4 CSS-Eigenschaften fehlerhafte Werte gegeben werden.
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/-
hi,
Weil Du vorher immerhin ca. 5600 divs erzeugst, bei jedem muß 3 mal die Fehlerkorrekturroutine eingreifen, weil immerhin 3 von 4 CSS-Eigenschaften fehlerhafte Werte gegeben werden.
*lol*, das kann man wohl eher als benchmark-script einsetzen, dass den browser einem belastungstest unterzieht. für produktiven einsatz aber definitiv ungeeignet.
gruss,
wahsaga
-
-
Hallo,
hier noch der Problemsteller. Das Problem scheint kniffeliger zu sein, denn die Antworten haben überhaupt nicht geholfen.
Die Umwandlung in String´s im style- Befehl geht problemlos und schnell.
Und es ist auch kein Benchmarktest für den Browser. Die Begrenzung scheint der Speicher der Grafikkarte zu sein. Selbst mit einer Zeitmessung erlebt man seine Überraschung!!.Also, gibt es jemanden der das Problem knackt???
Gruß
KarstenAuszug:
document.open();
showPixel();
document.close();document.write('Hallo, dies ist ein Test. Warum dauert die Ausgabe dieses Textes so lange?');
Wenn man das so einbaut, taucht der Text sofort auf. Es scheint als würde der Browser im "Direktschreibmodus" sein.
-
Hallo,
da deine Pixel einen rechten Bereich ausfüllen, solltest Du am besten nur ein Div für alle Pixel verwenden.
Das Problem in Deinem Code haengt wahrscheinlich mit dem z-Index und dem Sortieren der Divs beim Hinzufügen des HTML-Textes zu den bereits gerenderten Pixel-divs zusammen. Kann man ausprobieren, indem man die Pixel-divs mit fallendem z-Index zeichnet, dann dauert das Zeichnen lange und der Text im HTML-Body wird schnell angezeigt.
MfG,
Lutz T.<HTML>
<HEAD>
</HEAD>
<BODY>
<script language="JavaScript">
var n=0;
function RGB(rr,gg,bb)
{ var cc="#", nn, ss="0123456789abcdef";
nn=rr%16;
cc+=ss.charAt((rr-nn)/16);
cc+=ss.charAt(nn);
nn=gg%16;
cc+=ss.charAt((gg-nn)/16);
cc+=ss.charAt(nn);
nn=bb%16;
cc+=ss.charAt((bb-nn)/16);
cc+=ss.charAt(nn);
return(cc);
}
function Graph()
{ var xx, yy;
for (yy=0; yy<=255; yy+=5)
{ for (xx=0; xx<=255; xx+=5)
{ document.write("<font color='"+RGB(xx,0,yy)+"'>|</font>");
n++
}
document.write("<br>");
}
}
document.open();
document.write("<div style='position:absolute; left:100; top:100; font-family:Arial; font-size:2px; line-height:1px;'>");
Graph();
document.write("</div>"+n+" Pixel wurden gezeichnet.<br>");
document.close();
</script>
Mal noch eine andere Idee: Den ganzen Block in ein Div rein!
</BODY>
</HTML>-
Hallo,
danke für die Tipps. Da mit dem <br> war eine Superidee. So ganz klappt es aber noch nicht. Die Fläche wird durchsichtig und damit verändern sich die Farben.
statt
{ document.write("<font color='"+RGB(xx,0,yy)+"'>|</font>");
müsste es heißen:
{ document.write("<font color='"+RGB(xx,0,yy)+"'>_</font>");
Dann kriegt man eine geschlossene Fläche hin.Aber was nicht klappt ist irgendwie 4x4 große Pixel zu verwenden (brauche ich, da hoher Rechenaufwand dahinter).
So habe ich immer noch keine richtige Lösung - leider.
Gruß Karsten
-
Hallo nochmal,
also ich kriege mit der Variante eine quadratische geschlossene Fläche hin (IE 5.5 und Netscape 7.1). Hier noch mal eine Erweiterung um bis zu 3x3 große "Pixel" zu zeichnen.
MfG,
Lutz T.function Graph(cc)
{ var xx, yy;
for (yy=0; yy<=255; yy+=5)
{ for (xx=0; xx<=255; xx+=5)
{ document.write("<font color='"+RGB(xx,255-xx,yy)+"'>"+cc+"</font>");
n++;
}
document.write("<br>");
}
}
document.open();
document.write("<div style='position:absolute; left:100; top:100; font-family:Arial; font-size:2px; line-height:1px;'>");
Graph("|");
document.write("</div>"+n+" Pixel wurden gezeichnet.<br>");
document.write("<div style='position:absolute; left:200; top:100; font-family:Arial; font-size:5px; line-height:3px;'>");
Graph("|||");
document.write("</div>"+n+" Pixel wurden gezeichnet.<br>");
document.close();Hallo,
danke für die Tipps. Da mit dem <br> war eine Superidee. So ganz klappt es aber noch nicht. Die Fläche wird durchsichtig und damit verändern sich die Farben.
statt
{ document.write("<font color='"+RGB(xx,0,yy)+"'>|</font>");
müsste es heißen:
{ document.write("<font color='"+RGB(xx,0,yy)+"'>_</font>");
Dann kriegt man eine geschlossene Fläche hin.Aber was nicht klappt ist irgendwie 4x4 große Pixel zu verwenden (brauche ich, da hoher Rechenaufwand dahinter).
So habe ich immer noch keine richtige Lösung - leider.
Gruß Karsten
-
PS:
Der Opera 7 braucht noch die style-Angabe "letter-spacing:-1px" (dann gehts aber nicht mehr im IE und Netscape, dort sollte wenn schon, dann "letter-spacing:0px" verwendet werden).
-
-
-