当用户将鼠标悬停在图像上时，尽可能快地加载图像

Question

我知道使用精灵会解决这个问题，还有其他更好的方法吗？

Answer 1

有些浏览器加载悬停图片，直到您将鼠标悬停在其上。如果图像很大或流量很慢，这是非常明显的。

理想情况下，您希望使用 Sprites图像，并在悬停时定位它们。

喜欢这个http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b

预加载图片到这样的虚拟div -

#temp
{
    background-image: url(/images/image1.png);
    background-image: url(/images/image2.png);
    background-image: url(/images/image3.png);
}

Answer 2

如何在html页面上添加要更改的图像并使用内联css显示为none，以便在呈现html页面时加载它，并在悬停时使用javascript更改图像。