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

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 引擎会自动开始加载背景图像。

PS 此代码在 IE8 中不起作用。对于旧浏览器，您需要使用其他 ajax 函数。