Why do I have so much lag?

Question

I have been working on this new website but the "buttons" I am using are causing a ton of lag, I would like to remove the lag if possible.

The website is here: http://lano-project.org/

The troubled code is here:

<td>
    <a href="templink-info.html">
    <img style="display: none" src="images/icons/hover-info.png"/>
    <img src="images/icons/info.png"
        onmouseover="this.src='images/icons/hover-info.png';
            document.getElementById('home_text').style.display = 'none';
            document.getElementById('info_text').style.display = 'block';"
        onmouseout="this.src='images/icons/info.png';
            document.getElementById('home_text').style.display = 'block';
            document.getElementById('info_text').style.display = 'none';"
        onclick=""/>
    </a>
    <h3>Info</h3>
</td>

with relevant css:

#icon tr td img{
    width: 100px;
    height: 100px;}
#icon tr td p{
    margin: 0px;}
#icon tr td{
    text-align: center;
    width: 150px;}
#icon{
    margin-left: auto;
    margin-right: auto;}

EDIT: The lag comes from the first mouseover on the buttons. — osyra42, Jul 23 '16 at 23:37

score 3 · Accepted Answer · answered Jul 23 '16 at 23:30

3

https://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/

You can boost your responsiveness by creating only one image with both states of your button that is twice as large as the button itself. Then, on mouseover, just change the background-position property using css instead of loading a new image every time. This effectively "slides" the image so that the correct part of it shows "through" the button. This operation is very fast, and I think you'll see a big difference.

answered Jul 23 '16 at 23:30

Matt Broatch

710
4
16

This approach is quite interesting, I may have to try it. – osyra42 Jul 23 '16 at 23:40
@LèlaNull this approach is industry standard – Samuel Cook Jul 24 '16 at 00:19

Paulius K. · Answer 2 · 2016-07-23T23:43:58.900

0

Compress your images and it the website will load a bit faster.

Post it on jsFiddle and specify the problem, because for now, I don't understand what do you want, because your website loads normally without any lag.

If you want to create an attribute with image, you can change the background of attribute or just use JS for.. some cool stuff you're trying to do.

EDIT: I've done in the past, my solution is to use background-image and change it on :hover

http://puu.sh/qc98m/a828b9ae4e.png like that.

edited Jul 23 '16 at 23:43

answered Jul 23 '16 at 23:36

Paulius K.

210
2
11

It lags when you mouseover the bottons – osyra42 Jul 23 '16 at 23:38
Oh. :) I'm going to look at it. – Paulius K. Jul 23 '16 at 23:39

score 0 · Answer 3 · edited May 23 '17 at 12:22

The mouseover is only slow when hovering the images for the first time. What's happening behind the scenes, is that the new (hover) images weren't loaded into the browser's cache when the page loaded, have to be loaded on first mouseover, and hence cause the (visual) delay. Subsequent cursor passes are as fast as would normally be expected.

One possible solution would be to preload images (which would obviously happen in the background) immediately when the page loads. From a similar question:

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

preloadImage('images/icons/hover-info.png');

Why do I have so much lag?

3 Answers3