Performance problem with onMouseover in Internet Explorer

Stefan Mueller · Dec 11, 2009

If I open a big table in Internet Explorer the onMouseover event gets
quite slow. When you move the mouse the change of the colors of the
rows is quite slow.

Here's an example:
Please copy the line '<tr class = "stil_normal" onMouseover ...' circa
10'000 times.

=============================================================

<html>
<head>
<style type="text/css">
tr.stil_normal {
background-color: #ffffbb;
}

tr.stil_mouseover {
background-color: #ffdd55;
}
</style>
</head>

<body>
<table width = "100%" border = "0" align = "center">
<tr class = "stil_normal" onMouseover = "className =
'stil_mouseover'" onMouseout = "className = 'stil_normal'"><th>TEST</
tn></tr>
...
<tr class = "stil_normal" onMouseover = "className =
'stil_mouseover'" onMouseout = "className = 'stil_normal'"><th>TEST</
tn></tr>
</table>
</body>
</html>

=============================================================

If you have a table with more columns then already a couple of hundred
lines is enough to see this effect.
In Opera it's a little bit faster and in Mozilla you don't see any
performance problems.

Do I have to live with it or is there a solution to prevent this
performance problem?

Jonathan N. Little · Dec 11, 2009

buzzard said:
I don't know if this will perform better or not,
but it has less code, and still appears to work:
(disclaimer: i only tested it on ff. but u'c'n try
it out on IE and see)

<html>
<head>
<style type="text/css">
tr.stil {
background-color: #ffffbb;
}

tr.stil:hover {
background-color: #ffdd55;

<snip>

If you don't trigger quirks mode :hover pseudo-classes will work on
non-link elements in IE7+ IE6 and less will need JavaScript assistance,
and yes, IE is no sprinter when it comes to JavaScript.

beroccaboy · Nov 13, 2010

ie onmouseover slow

i had a problem that sounded similar. to check if it is the same problem try this:

1. browse to your web page using ie
2. with the page still up disconnect your computer from the internet
3. do your onmouseover stuff

for me, only the preloaded onmouseover images appeared; and now the the solution might seem obvious. i had only precached my onmouseover images.

for some reason telling ie to precache the onmouseover images was like telling it not to cache anything else. wtf!? only ie had the problem; there were no problems either way with;

chrome
firefox
safari
opera

with IE you MUST pre-cache both the normal image and the onmouseover image (Google "new Image()" for more information):

<head>
<script type="text/javascript">

image1 = new Image();
image1.src = "images/button-physiotherapy-on.jpg";

image2 = new Image();
image2.src = "images/button-physiotherapy-on-onmouseover.jpg";

</script>
</head>

here is a prototype of the page, now working:

soundlearning.com.au/physiotherapy.html

i am not a web developer; i just did it for a friend. all the graphics, html, javascript and css stuff was learned thanks to:

w3schools.com
inkscape.org
gimp.org
kompozer.net

and if my friend likes it, the final landing place for this page will be:

PhysiCo. City Physiotherapy
physicocityphysio.com

regards
byron wu
and kerry [quayle] wyer
learn to read with help from soundlearning.com.au

Help with Visual Lightbox: Scripts	2	May 3, 2023
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery?	4	Sep 29, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Having trouble centering contents of td ?	3	May 2, 2023
Help needed with thank you message	5	Sep 11, 2021
Javascript DOM	1	Mar 29, 2023
Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
SendGrid email issue in responsive Gmail	1	Nov 4, 2021

Performance problem with onMouseover in Internet Explorer

Stefan Mueller

Jonathan N. Little

beroccaboy

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads