JavaScript Profi gefragt!
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktivismus
aktor
beitrag
boxen
datei
error
grafik
graphik
image
klicken
not
pack
prinzip
quellen
session
speed
steuern
test
transitional
versuchen
-
Hallo ich versuche einen JS Speedtest in meine page einzubauen. leider klappt das nicht. wei? jemand warum???
Wenn man das JS zu php includes machen kann ist das auch bestens...
edit
Sorry voll verzockt und bei php gepostet, bitte verschieben!
<noscript> <meta http-equiv="refresh" content="0; URL=index.php"> </noscript> <script language="javascript1.1"> connectionSpeed = 0; function drawCSImageTag( fileLocation, fileSize, imgTagProperties ) { start = (new Date()).getTime(); loc = fileLocation + '?t=' + escape(start); // Append the Start time to the image url to ensure the image is not in disk cache. document.write('<div style="visibility:hidden; position:absolute; z-index=3;"><img src="' + loc + '" ' + imgTagProperties + ' onload="connectionSpeed=computeConnectionSpeed(' + start + ',' + fileSize + ');"></div>'); return; } function computeConnectionSpeed( start, fileSize ) { // This function returns the speed in kbps of the user's connection, // based upon the loading of a single image. It is called via onload // by the image drawn by drawCSImageTag() and is not meant to be called // in any other way. You shouldn't ever need to call it explicitly. end = (new Date()).getTime(); speed = (Math.floor((((fileSize * 8) / ((end - start) / 1000)) / 1024) * 10) / 10); if (speed) { if (speed < 80) { document.write ("<link rel='stylesheet' type='text/css' href='slow.css'>"); return; } } document.write ("<link rel='stylesheet' type='text/css' href='fast.css'>"); } </script><script language="javascript"> </script><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head><body><script language="javascript1.1"> <!-- drawCSImageTag( 'design/speed.jpg', // Image filename 15000, // Image size 'border=1 height=200 alt="test"'); // <img> tag attributes //--></script> <br> <center> <?php echo "<span class='speedtest'>"; if ($_SERVER["HTTP_ACCEPT_LANGUAGE"] <> '') { $lang_browser = substr($HTTP_ACCEPT_LANGUAGE, 0, 2); if ($lang_browser == "de") { echo "TinyWebGallery testet die Verbindungsgeschwindigkeit ...<br/>Bitte ?berpr?fen Sie den Parameter install_dir in der config.php, wenn die Galerie nicht startet"; } else { echo "TinyWebGallery is testing your connection speed ...<br/>If this message does not disapper please check the install_dir in the config.php!"; } } echo "</span>" ?>
Beitrag ge?ndert am 15.09.2005 18:21 von re-aktor -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ein paar Infos w?ren nicht schlecht.
Was genau soll der Speedtest genau machen ?
Was f?r Fehlermeldungen/falsche Ergebnisse kommen?
Wo hast du den Code her ? Selber geschrieben ? -
aaahhh eine antwort!!!
- der test soll wenn ein modem user auf die seite eiert, ihn zu einem stylesheet ohne grafiken umleiten. sdd bonn hats per js probiert. 2 verschiedene inlcudes per php w?ren auch ok.
-ich vermute er l?dt die ganze zeit neu und schreibt nicht wie er soll je nach speed 2 verschiedene stylesheets hin.
- nein nicht selbst geschrieben, der speedtest ist aus http://www.tinywebgallery.de.vu -
Ein Stylesheet ohne Graphiken ?
Mit CSS kann man zwar steuern, ob ein Bild angezeigt wird oder nicht, aber geladen wird es auf jeden Fall !
Da w?ren Includes auf jeden Fall die richtige L?sung.
Ok, ich versuche mal eine eigene L?sung zu entwickeln, denn der Code erscheint mir ein wenig aufgebl?ht.
<html>
<head>
<meta name="generator" content="HTML Studio" />
<title> </title>
</head>
<body>
<script type="text/javascript">
jetzt=new Date();
</script>
<img src="testbild.jpg" alt="Bild zum ermitteln der Geschwindigkeit" />
<script type="text/javascript">
function check_bilder()
{
if(document.images[0].complete==true)
{
dann=new Date();
ergebnis=dann.getTime()-jetzt.getTime();//Zeitabstand wird berechnet
if(ergebnis>5000)window.location.href="langsam.php";//wenn das Laden l?nger als 5 Sekunden gedauert hat, dann laden von langsam.php
else window.location.href="schnell.php";
}
else setTimeout("check_bilder()",500);//?berpr?ft alle 0,5 Sekunden ob Bilder geladen sind
}
check_bilder();
</script>
</body>
</html>
Ich hoffe, ich habe dieses Beispiel gut genug auskommentiert, so das weitere Erkl?rungen un?tig sind. -
na das sieht doch sehr vielversprechend aus.
Wenn das funktioniert, hast du re-aktor und mir gerade viel Arbeit und viele Geduldsf?den erspart
meine Javascript-Kenntnisse reichten leider nur aus, um den document-write-Befehl reinzufriemeln, leider entpuppte sich das nicht als verwertbare L?sung.
Wenn ich das aber soweit richtig deute, basieren alle Speedtests auf dem Prinzip, dass zwei Zeitpunkte bestimmt werden, und dann die Differenz errechnet wird....
d.h., wenn ich die Ladezeit z.B. durch ?berlasten der Verbindung (z.B. durch paralleles Filesharing) k?nstlich in die H?he treibe reagiert der Speedtest ebenfalls darauf (richtig so).
G?be es noch eine andere M?glichkeit, z.B. um die verf?gbare Bandbreite anzuzeigen, die ausgenutzt werden kann?
W?re ja z.B. f?r eine Download-?bersicht denkbar, um grob vorauszusagen, wie lange der Doqnload dauern w?rde...
Gru?
ssd -
mhh du hast mich falsch verstanden er soll folgende abschnitte ob mit includes oder per JS einf?gen:
<link rel="stylesheet" type="text/css" href="http://www.klick-aktivismus.de/style.css" title="Stylesheet">
<style type="text/css">@import url(http://www.klick-aktivismus.de/style.css) all;</style>
<!--[if IE]>
<style type="text/css">@import url(http://www.klick-aktivismus.de/styleIE.css);</style>
<![endif]-->
oder wenn langsam
<link rel="stylesheet" type="text/css" href="http://www.klick-aktivismus.de/styleSLOW.css" title="Stylesheet">
die style sheets steuern dann ob grafiken angezeigt werden oder nicht. mit dem laden der bilder hat das eigentlich nichts zu tun!
Beitrag ge?ndert am 15.09.2005 20:22 von re-aktor -
mhh du hast mich falsch verstanden er soll folgende abschnitte ob mit includes oder per JS einf?gen:
<link rel="stylesheet" type="text/css" href="http://www.klick-aktivismus.de/style.css" title="Stylesheet">
<style type="text/css">@import url(http://www.klick-aktivismus.de/style.css) all;</style>
<!--[if IE]>
<style type="text/css">@import url(http://www.klick-aktivismus.de/styleIE.css);</style>
<![endif]-->
oder wenn langsam
<link rel="stylesheet" type="text/css" href="http://www.klick-aktivismus.de/styleSLOW.css" title="Stylesheet">
Dann erstellst du eben 2 Dateien mit den Namen
langsam.php
schnell.php
und schreibst in die beiden Dateien die ensprechenden stylesheets rein.
In der Speedtest-Datei muss ja noch nicht der stylesheet angezeigt werden, erst in den folgenden Dateien.
die style sheets steuern dann ob grafiken angezeigt werden oder nicht. mit dem laden der bilder hat das eigentlich nichts zu tun!
Wenn der Browser im Quelltext eine graphikrefferenz findet, dann l?dt er diese herunter. Wenn er sie dann geladen hat, schaut er wie er sie darstellen soll.
Ergo HTML vor CSS
Ergo CSS hat keinen Einfluss darauf, ob Graphiken geladen werden.
Das k?nnte man zumindest eingeschr?nkt mit JavaScript steuern, indem man allen Bildern eine 1pixel-graphik als Quelle verpasst und dann die Quelle einfach ?ndert, so das der Browser die Datei nachl?dt. -
bladehunter schrieb:
Dann erstellst du eben 2 Dateien mit den Namen
langsam.php
schnell.php
und schreibst in die beiden Dateien die ensprechenden stylesheets rein.
In der Speedtest-Datei muss ja noch nicht der stylesheet angezeigt werden, erst in den folgenden Dateien.
JAAA!
so hatte ich mir das gedacht. nur wie soll das script aussehen das dann die verschiedenen php dateien je nach speed ansteuert???
bladehunter schrieb:
Wenn der Browser im Quelltext eine graphikrefferenz findet, dann l?dt er diese herunter. Wenn er sie dann geladen hat, schaut er wie er sie darstellen soll.
Ergo HTML vor CSS
Ergo CSS hat keinen Einfluss darauf, ob Graphiken geladen werden.
Das k?nnte man zumindest eingeschr?nkt mit JavaScript steuern, indem man allen Bildern eine 1pixel-graphik als Quelle verpasst und dann die Quelle einfach ?ndert, so das der Browser die Datei nachl?dt.
nein. das will ich gar nicht. wir reden in dem punkt aneinnander vorbei! Ich meinte das ich bei dem "lahmen" css einfach die grafiken rausnehme und stattdessen mit border arbeite so ungef?hr:
td.box-top
wird zu:
{
height: 84px;
width: 244px;
background-image: url(design/box-top.png);
}
td.box-top
{
height: 84px;
width: 244px;
border: 1px;
}
-
k?nnte es nicht daran liegen das der browser erst zum interpretieren des javascript beginnt wenn er alle komponenten geladen hat?
mfg
edvo -
nein da der code 1. so nicht arbeitet und 2. in der index.php ganz oben eingebunden wird. abgesehen davon l?dt er zwar zeigt aber gar nichts an!
guckst du:
http://www.klick-aktivismus.de/indextest.php
-
Wenn du es mit PHP machen m?chtest, kannst du ja mal hier schauen.
http://www.phpking.de/thread.php?postid=904(so ganz gef?llt mir das Skript auch nicht)
Kannst aber auch etwas von alopex benutzen. http://alopex.pyrokar.lima-city.de/index.php/PHP/essentials.html#calculate_runtime
Ups. Ich glaube das von alopex berechnet garnicht das was du brauchst. Ich glaube es ist die Zeit, die das Skript braucht um auf den Server ausgef?rt zu werden.
In Prinzip ist es aber nicht so schwer. Du musst eine Ausgabe erzeugen (z.B. Leerzeichen) und dann jeweilz davor und dannach die Zeit messen.
Jens
Beitrag ge?ndert am 15.09.2005 22:55 von jacr -
h?h nen speedtest hab ich doch schon. ich muss den nur so anpassen das er mir je nach speed der verbindung:
a) 2 verschiedene Texte per JS ausspuckt
b) 2 verschiedene Texte per includes ausspuckt
das w?ren dann meine beiden verschiedenen css -
Versuch mal sowas.
. . . function computeConnectionSpeed( start, fileSize ) { // This function returns the speed in kbps of the user's connection, // based upon the loading of a single image. It is called via onload // by the image drawn by drawCSImageTag() and is not meant to be called // in any other way. You shouldn't ever need to call it explicitly. end = (new Date()).getTime(); speed = (Math.floor((((fileSize * 8) / ((end - start) / 1000)) / 1024) * 10) / 10); if (speed) { if (speed < 80) { window.location = "index.php?bandwidth=low"; return; } } window.location = "index.php?bandwidth=fast"; } . . .
Und in der Index.php musst dann sowas in der Art schreiben.
<? if($_GET['bandwidth']=='fast'){ echo "Mann bist du schnell. ;)"; }else{ echo "Warum hast du kein DSL?"; } ?>
Jens -
naja eigentlich wollt ich das ja auf der index.php haben. aber so ginge es zur not auch...
nur das er mir folgenden fehler ausspuckt:
Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in /home/www/web100/html/test2.php on line 28
mein code sieht so aus:
<?
if($_GET['bandwidth']=='fast'){
echo "<link rel="stylesheet" type="text/css" href="http://www.klick-aktivismus.de/style.css" title="Stylesheet">
<style type="text/css">@import url(http://www.klick-aktivismus.de/style.css) all;</style>
<!--[if IE]>
<style type="text/css">@import url(http://www.klick-aktivismus.de/styleIE.css);</style>
<![endif]-->";
}else{
echo "<link rel="stylesheet" type="text/css" href="styleSLOW.css" title="Stylesheet">";
}
?>
wobei die zeile mit 28 das hier ist
echo "<link rel="stylesheet" type="text/css" href="http://www.klick-aktivismus.de/style.css" title="Stylesheet">
-
naja eigentlich wollt ich das ja auf der index.php haben. aber so ginge es zur not auch...
Du kannst nat?rlich auch beides in die index.php datei Packen.
Musst dann nur aufpassen, dass er dann nicht nochmal die Bandbreite testet.
nur das er mir folgenden fehler ausspuckt:
Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in /home/www/web100/html/test2.php on line 28
mein code sieht so aus:
<?
if($_GET['bandwidth']=='fast'){
echo '<link rel="stylesheet" type="text/css" href="http://www.klick-aktivismus.de/style.css" title="Stylesheet">;
<style type="text/css">@import url(http://www.klick-aktivismus.de/style.css) all;</style>
<!--[if IE]>
<style type="text/css">@import url(http://www.klick-aktivismus.de/styleIE.css);</style>
<![endif]-->';
}else{
echo '<link rel="stylesheet" type="text/css" href="styleSLOW.css" title="Stylesheet">';
}
?>
Du solltest ' und nicht " nemen. ;)
So wie es jetzt oben steht.
Jens -
das ist nicht schlecht nur hab ich ein problem:
hier funktioniert alles
http://www.klick-aktivismus.de/test2.php?bandwidth=fast
hier klicke mal auf z.B. news! merkst du was???
http://www.klick-aktivismus.de/test2.php?bandwidth=low
was kann man dagegen tun?
lassen sich nicht irgendwie die links ver?ndern? so von wegen <a class="menu" href="?action=news">news</a> in <a class="menu" href="+?action=news">news</a>
und wie kann ich das in die index.php packen??
Beitrag ge?ndert am 17.09.2005 04:53 von re-aktor -
Du kannst es in Prinzip ganz genau so wie bei http://www.tinywebgallery.de.vu machen.
Die abeiten mit Session damit nur einmal die Geschwindigkeit gemessen werden muss.
Und je mach dem, ob die Geschwindigkeit gemessen wurde oder nicht wird der Geschwindigkeitstest mit include eingebaut.
Jens -
das w?rde ja eigentlich beide probs l?sen.
a) w?rde er er bei low nicht beim link nutzen auf fast gehen
b)k?nnte ich es dann in index.php einbinden
nur wie mache ich das mit den sessions? wenn ich das versuche von twg zu nutzen haut das nich hin weil das anders aufgebaut ist mit den gets!
kannst du mir das machen???
*ganz lieb frag* -
leider meldet sich jacr nicht mehr. kann jemand anders diese sache mit den sessions machen? ich kann es leider nicht...
-
Sorry, habe ein bisschen wenig zeit. :(
In Prinzip ist es nicht so schwer.
In der Index.php
Nachdem das SESSION gestarte wurde (so wie ich da verstanden habe hast du ja schon eine gestarte).
if(isset($_GET['bandwidth'])){
$_SESSION['bandwidth']=$_GET['bandwidth'];
}
if (!isset($_SESSION['bandwidth']) {
include ("speed.inc.php");
}
Und in dem was du schon neu eingebau hat musst du dann $_GET['bandwidth'] durch $_SESSION['bandwidth'] ersetzen.
speed.inc.php kannst du fast so von TinyWebGallery12 ?bernehmen. Nur die ?nderungen (das was ich dir schon oben geschreiben habe) solltest nat?rlich ?ndern.
Und dann vielleicht sowas wie den Title und so auch ?ndern. ;)
Edit
Sollte keine SESSION gestarte sein. Einfach an Anfang deiner index.php folgendes schreiben:
session_start();
Jens
Beitrag ge?ndert am 19.09.2005 13:35 von jacr -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
