HTML JQuery - 快速加载图像？答案

【问题标题】：HTML JQuery - Load images fast?HTML JQuery - 快速加载图像？
【发布时间】：2012-01-10 23:43:03
【问题描述】：

我想这样当我执行以下命令时：

$("input.button").hover(function(){
    $(this).css('background-image', 'url(blah)');
});

有一段时间背景是空白的。如果您注意到 http://facebook.com ，当您单击按钮时，会立即加载背景图像。有没有办法模拟这种行为？

【问题讨论】：

【解决方案1】：

您必须在页面加载时预加载图片：

$(window).load(function(){
    (new Image()).src = 'path/to/img';
});

【讨论】：

如何在不妨碍用户的情况下做到这一点？
加载标签和设置display:none; 是否也能正常工作？
在您使用之前，用户不会看到它。上面的代码只是将图片加载到浏览器的缓存中，这样就不用在你需要的时候下载了。
是的，加载<img> 会起作用，但按照建议进行操作往往会更干净。想象一下，如果您要预加载 20 多张图片。
@Ken，使用 display:none 加载图像效果很好......唯一的缺点是它会在页面加载时强制用户下载图像...... js允许它在初始页面加载后完成，因此初始页面加载时间会更快。