预加载图像而不触发浏览器上的“加载”图标

Question

我知道我可以预加载这样的图像：

CSS：

#preload {
  background-image: url('image-to-be-preloaded.png');
}

JS：

(new Image()).src = 'image-to-be-preloaded.png';

然而，当加载上述图像时，浏览器会显示“加载图标”（在Firefox和Chrome上，它位于选项卡上的图标中）。我可以预先加载图像，而不会让用户觉得页面仍在加载吗？

Answer 1

你可以通过ajax来实现：

var xhr = new XMLHttpRequest();
xhr.open("GET",'image-to-be-preloaded.png',true);
xhr.send(null);

但 #preload 必须是隐身元素。如果 #preload 可见，则css引擎自动启动加载背景图像。

P.S。此代码在IE8中不起作用。对于旧浏览器，您需要使用其他ajax功能。