Css:从一个单独的文件中悬停显示一个更大的图像(质量更好)

Css:从一个单独的文件中悬停显示一个更大的图像(质量更好),css,image,resize,hover,Css,Image,Resize,Hover,因此,当用户将鼠标悬停在我的缩略图上时,我想显示一幅更大(质量更好)的图像。 不是它点击链接到的全尺寸版本,但仍然是一个显示更多细节的尺寸,前提是它不会增加我的页面加载时间 如果可以只在鼠标上方加载图像,而在页面加载时不进行预加载,那就更好了,因为这样会阻碍我的速度 这会很难做到吗?您可以使用CSS轻松做到这一点,使用后台:透明url(“”)无重复在悬停操作时:。 我对JS插件还不太熟悉,不能推荐这些插件,但我确信它们确实存在 我的观点是,当您请求一个未预加载的图像时,您会有一个短实例,其中低分

因此,当用户将鼠标悬停在我的缩略图上时,我想显示一幅更大(质量更好)的图像。 不是它点击链接到的全尺寸版本,但仍然是一个显示更多细节的尺寸,前提是它不会增加我的页面加载时间

如果可以只在鼠标上方加载图像,而在页面加载时不进行预加载,那就更好了,因为这样会阻碍我的速度


这会很难做到吗?

您可以使用CSS轻松做到这一点,使用
后台:透明url(“”)无重复在悬停操作时:。
我对JS插件还不太熟悉,不能推荐这些插件,但我确信它们确实存在

我的观点是,当您请求一个未预加载的图像时,您会有一个短实例,其中低分辨率图像消失,而较好的图像会被请求并加载,使其在尚未缓存时闪烁一次。精灵弥补了带有悬停状态的图标给人的浮躁印象。诚然,这并不是世界末日,但这并不理想

哦,如果你对性能感兴趣的话,你可能想看看Chrome的PageSpeed扩展,看看你的网站做得怎么样。它也做图像优化分析,如果有改进的余地,你可以直接从插件获得优化的图像。此外,阅读图像格式和最佳Photoshop质量设置可以帮助您在不降低用户体验的情况下节省一些宝贵的千字节


这回答了你的问题吗?

老实说,我会寻找其他方法来提高你的性能。我觉得你想要的不仅是棘手的,而且对可用性有害。但这一切都取决于你在展示什么以及如何展示。你有没有研究过为网页优化图片的方法?我的图片通常只是链接到大版本的缩略图,所以没有速度损失问题。你认为可用性会在哪些方面受到影响?悬停的图像大约有20 kb左右。我不知道怎么做