为什么我会有这么多滞后？

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;}

Answer 1

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.

Answer 2

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.

Answer 3

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');