预加载图像而不触发“;加载“;图标

Preloading images without triggering the "loading" icon on the browser

本文关键字：加载 图标 图像      更新时间：2023-09-26

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

CSS：

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

JS:

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

然而，当加载上述图像时，浏览器会显示"加载图标"（在Firefox和Chrome上，这位于选项卡上的图标中）。我可以在用户感觉页面仍在加载的情况下预加载图像吗？

您可以通过ajax实现：

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

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

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

相关文章：