[JS] Trage website IE

[TommyGun]

Beste mede Tweakers,

Internet Explorer heeft problemen met het laden van mijn website. Dit wil zeggen; het duurt lang eer pagina's geladen zijn. De content tenminste, de header / gedeelte van de opmaak verschijnt wel vlot. Firefox geeft totaal geen problemen. Voor zover ik weet treed dit probleem op met zowel IE6 als IE7. IE8 heb ik echter nog niet getest.

Zelf heb ik gekeken naar mijn PHP, SQL en CSS code, maar hierin kan ik niks vinden wat dit zou kunnen veroorzaken. Nu heb ik echter ook elders meegekregen dat ik het probleem ergens anders moet zoeken, en dan kom ik uit bij JavaScript dat gebruikt word op mijn website om thumbnails te generen / laden. Waarom? Pagina's waar deze JS code niet gebruikt word laden wel snel.

De betreffende code:

JavaScript:

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

Xoffset= 16; // modify these values to ...
Yoffset= 16; // change the popup position.

var old,skn,iex=(document.all),yyy=-1000;

var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all

if (ns4)
skn=document.thumbblok
else if (ns6)
skn=document.getElementById("thumbblok").style
else if (ie4)
skn=document.all.thumbblok.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_mouse;

function popup(msg,bak){
var content="<TABLE WIDTH=80 style='border: #000000 solid 1px' bordercolor=#000000  CELLPADDING=0 CELLSPACING=0><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
yyy=Yoffset;
if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(ns6){document.getElementById("thumbblok").innerHTML=content;skn.display=''}
if(ie4){document.all("thumbblok").innerHTML=content;skn.display=''}
}

function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
skn.left=x+Xoffset;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;
}

function stopthumb(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none"
}

Manier van opvragen:

PHP:

<?php
if($mode == "normal") {
        $sql3 = "SELECT t01.id, t01.photo, t01.title, t01.descr from games t01, categories t02
        where t01.cid = t02.cid
        AND t01.active = 1
        AND t02.cname = '$cat'
        order by t01.id $order
        Limit $limit";
        $result3 = mysql_query($sql3) or die ("ERROR: " . mysql_error());
        while ($rij3 = mysql_fetch_array($result3)){
        if($rij3['photo'] == ""){
            $rij3['photo'] = "images/no_thumb.gif";
        }
        $title = $rij3['title'];
        if(strlen($title)>20) {
        $title = substr($title, 0, 20); 
        $title = "" . $title . "..."; }
        echo("<a ONMOUSEOVER=\"popup('<img src=".$rij3['photo']." width=$settings2->sizex height=$settings2->sizex>','0')\"; ONMOUSEOUT=\"stopthumb()\" href=\"index2.php?game=".$rij3['id']."&name=".str_replace(" ", "_", $rij3['title'])."\" $target>".$title."</a><br> \n");
        }
}
?>

De bron is dan als volgt:

HTML:

<!--Thumbnails-->
<STYLE TYPE="text/css">
#thumbblok {POSITION:absolute;VISIBILITY:visible;Z-INDEX:200;}
//
</STYLE>

<DIV ID="thumbblok"></DIV>
<script type="text/javascript" src="js/thumbs.js"></script>

<!--End Thumbnails-->

HTML:

<a ONMOUSEOVER="popup('<img src=thumbnails/2739.jpg width=100 height=100>','0')"; ONMOUSEOUT="stopthumb()" href="index2.php?game=2739&name=Bush_Shootout" >Bush Shootout</a><br>

Nu sprak ik iemand met meer verstand van JS, en hij vertelde mij het volgende:

Ik weet niet wat het skn object doet, maar je mousemove event gaat af bij iedere beweging van de muis.

Dus het volgende stukje code wordt constant uitgevoerd. Je bent dus constant je skn object naar dezelfde positie aan het verplaatsen. Misschien dat IE daar niet zo goed in is? Helemaal niet als hij het naar -1000 wilt verplaatsen.

JavaScript:

function get_mouse(e)
{
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;

skn.left=x+Xoffset;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;

}

Ik zou echter niet weten of dit daadwerkelijk het probleem is. Graag zou ik dit willen testen maar simpelweg de code verwijderen lijkt me niet de oplossing. Misschien dat iemand mij op weg kan helpen hiermee? Ik heb uiteraard al gezocht, maar op meerdere site's werd bovenstaand JS script gepost, en in geen gevallen kwam dit probleem voor.

Bij voorbaat dank!

[sopsop]

Ik heb je code niet doorgekeken, maar je krijgt een aanwijzing van iemand dat het wellicht door iets komt. Zo moeilijk moet het toch niet zijn om die mousemove even uit te zetten om te kijken of dat verschil maakt? Maak gewoon de get_mouse functie even leeg, dan merk je het vanzelf.

[RobIII]

Lees eens ons Debuggen: Hoe doe ik dat? stukje? En waarom zou het verwijderen van die code niet helpen? Als het probleem dan is opgelost lijkt het me aardig aannemelijk dat het (een deel van) de oorzaak van je probleem is

Overigens: Waar hoort mijn topic? PRG >> WEB

[ Voor 16% gewijzigd door RobIII op 01-10-2008 12:18 ]

[TommyGun]

Helaas mocht het verwijderen van de functie niet baten, Er was geen enkel verschil te merken in de snelheid.

@ Roblll, dat heb ik doorgelezen, maar ik krijg helaas niet gevonden waar de fout nu in zit. Met Firefox heb ik de headers bekeken maar op de JS en wat CSS files na word er niks ingeladen. Dus het is aannemelijk dat een van deze de boosdoener is, aangezien pages zonder thumbs geen problemen geven. Ik zou dus de JS file zeggen, maar van de andere kant maken die pages eveneens geen gebruik van de SQL code om de games op te vragen. Echter word het door anderen ontkracht dat ik hier mijn heil zou moeten zoeken.

B.v.d

[ Voor 8% gewijzigd door TommyGun op 01-10-2008 12:37 ]

[RobIII]

Je weet dat IE sowieso trager is in veel gevallen? En heb je een link naar de pagina waar het probleem optreedt? Of beter: een uitgeklede testcase?

[TommyGun]

Dat weet ik, maar volgens mij is het in dit geval wel heel erg veel trager. Het probleem doet zich al voor op de index, zie http://www.gamergun.nl/. Een lange lijst is nog veel erger, zie http://gamergun.nl/index_games.php?games=alle. Een voorbeeld van een wel snelle page is http://gamergun.nl/help.php en http://gamergun.nl/index2...me=2869&name=Circle_Chain

Mijn doel was van tevoren al om de code zo schoon mogelijk te houden, dus eigenlijk staat alleen het broodnodige erin. Eventueel kan ik wel een pagina zonder opmaak creëren, maar wel met de SQL voor de games en de JS file voor de thumbs. Mocht je dat niet bedoelen dan hoor ik graag van je wat ik dan wel zou kunnen doen.

Bedankt

[ Voor 6% gewijzigd door TommyGun op 01-10-2008 12:57 ]

[Haan]

Bij mij in IE7 laadt die site wel gewoon lekker snel hoor.

[TommyGun]

Vreemd. Bij een vriend thuis en hier op het werk is het echt dramatisch. (Hij IE6, ik IE7, HTTP1.1 uit). Echter op school (zowel IE6 als IE7) is het niet zo erg. Het lijkt erg te verschillen per gebruiker en systeem/netwerk(?). Bedankt iig voor het laten weten Haan.

[disjfa]

Om even om je vraag te praten. Je checkt op netscape 4, netscape 6 en internet explorer 4 in je code. Hoeveel van je gebruikers gebruiken die browsers nog als ik vragen mag?

[TommyGun]

disjfa schreef op woensdag 01 oktober 2008 @ 13:15:
Om even om je vraag te praten. Je checkt op netscape 4, netscape 6 en internet explorer 4 in je code. Hoeveel van je gebruikers gebruiken die browsers nog als ik vragen mag?

Klopt. En dat zijn er vrijwel geen, dat weet ik, in principe kunnen die checks er ook uit (JS script is niet door mij gemaakt) maar ik ben er nog niet achter hoe ik dit correct ga doen. Het leuke is dat bijv spele.nl dit script ook gebruikt: http://proxy.spele.nl/javascript/popupimg.js

Edit; ik heb enkele aanpassingen overgenomen maar dat mocht niet baten. Soms laden pagina's wel redelijk snel, bijv na een CTRL+F5, maar meer ook niet. Hoewel ik moet zeggen dat spele.nl hier ook niet vlot is met Internet Explorer..

[ Voor 29% gewijzigd door TommyGun op 01-10-2008 13:36 ]

[Verwijderd]

TommyGun schreef op woensdag 01 oktober 2008 @ 13:22:
[...]


Klopt. En dat zijn er vrijwel geen, dat weet ik, in principe kunnen die checks er ook uit (JS script is niet door mij gemaakt) maar ik ben er nog niet achter hoe ik dit correct ga doen. Het leuke is dat bijv spele.nl dit script ook gebruikt: http://proxy.spele.nl/javascript/popupimg.js

Dus het "leuke" is dat je support vraagt over een script wat je bij een andere site gekopieerd is?

[TommyGun]

Verwijderd schreef op woensdag 01 oktober 2008 @ 13:34:
[...]

Dus het "leuke" is dat je support vraagt over een script wat je bij een andere site gekopieerd is?

Nee, het overgrote deel van mijn website is zelf gescript, maar door mijn gebrek aan JS kennis is het thumb script overgenomen .Van Google weliswaar, ik zag enkel net bij toeval dat spele.nl hetzelfde script gebruikt, met een paar kleine aanpassingen. Zie ook mijn edit van hierboven.

[Haan]

TommyGun schreef op woensdag 01 oktober 2008 @ 13:10:
Vreemd. Bij een vriend thuis en hier op het werk is het echt dramatisch. (Hij IE6, ik IE7, HTTP1.1 uit). Echter op school (zowel IE6 als IE7) is het niet zo erg. Het lijkt erg te verschillen per gebruiker en systeem/netwerk(?). Bedankt iig voor het laten weten Haan.

Nu kijk ik nog een keer, en is het wel ook dramatisch..
Overigens krijg ik nu ook een melding dat "div_popupimg" null is.

En dan nog voor het mooi dingen als

JavaScript:

var ns4=document.layers 
var ns6=document.getElementById&&!document.all 
var ie4=document.all 

even afsluiten met ; al maakt dat in JS volgens mij niet heel veel uit.

Tenslotte krijg ik 1315 warnings als ik de pagina open met mijn Visual Studio debugger Dus als je nog eens valid XHTML wil schrijven moet je daar ook eens naar kijken

Ook nog 1 error:

JavaScript:

<STYLE TYPE="text/css">
#thumbblok {POSITION:absolute;VISIBILITY:visible;Z-INDEX:200;}
//
</STYLE>

die // staan daar per ongeluk denk ik

[ Voor 9% gewijzigd door Haan op 01-10-2008 13:39 ]

[TommyGun]

Bedankt voor de tip. Het valideren moet inderdaad nog gebeuren, dus dat komt wel goed. Misschien wel slim om dat eerst te doen alvorens verder te gaan met deze kwestie.

Edit; klopt, nogmaals bedankt

[ Voor 8% gewijzigd door TommyGun op 01-10-2008 13:43 ]

[crisp]

Als je wilt weten of het aan je javascripts ligt dan zet je javascript toch even helemaal uit in je browser en kijk je of dat verschil maakt?

[Noork]

Hier geen problemen met zowel IE als Opera. Het gaat snel genoeg.

Maar je zou wellicht een ander script kunnen proberen, b.v. http://lab.arc90.com/2006/07/link_thumbnail.php

[TommyGun]

crisp schreef op woensdag 01 oktober 2008 @ 13:46:
Als je wilt weten of het aan je javascripts ligt dan zet je javascript toch even helemaal uit in je browser en kijk je of dat verschil maakt?

Bedankt voor de tip. Nu is IE stukken sneller met scripting uitgeschakeld!

Noork schreef op woensdag 01 oktober 2008 @ 14:06:
Hier geen problemen met zowel IE als Opera. Het gaat snel genoeg.

Maar je zou wellicht een ander script kunnen proberen, b.v. http://lab.arc90.com/2006/07/link_thumbnail.php

Dit script was ik ook al eens tegengekomen, maar het is net niet bedoeld voor hetgeen dat ik wil. Maar ik zal eens verder zoeken voor een ander script. Toch bedankt!

[TeeDee]

Als extraatje (zeker omdat ik de afgelopen paar dagen al IE6 performance aan het verbeteren ben):

IE6 heeft de nare eigenschap om afbeeldingen geladen via innerHtml opnieuw neer te halen, dus headers (304 vs 200) negeert IE6 gewoon en sleurt de hele meuk helemaal binnen. Of dit in IE7 al beter gaat kan ik niet zeggen.