Performance problem with onMouseover in Internet Explorer

Discussion in 'HTML' started by Stefan Mueller, Dec 11, 2009.

  1. 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?
     
    Stefan Mueller, Dec 11, 2009
    #1
    1. Advertising

  2. buzzard wrote:
    > Stefan Mueller wrote:
    >> 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.


    <snip>

    >> =============================================================
    >>
    >> 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?

    >
    >
    >
    > 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 11, 2009
    #2
    1. Advertising

  3. Stefan Mueller

    beroccaboy

    Joined:
    Nov 13, 2010
    Messages:
    1
    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
     
    beroccaboy, Nov 13, 2010
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. cmay
    Replies:
    0
    Views:
    1,180
  2. pduncan
    Replies:
    1
    Views:
    784
    pduncan
    Apr 28, 2006
  3. Ed Hauptman
    Replies:
    7
    Views:
    1,100
    Ed Hauptman
    Aug 7, 2009
  4. John Smith
    Replies:
    1
    Views:
    174
    Evertjan.
    Mar 12, 2005
  5. Replies:
    3
    Views:
    129
Loading...

Share This Page