使用javascript预加载图像并在准备好时显示

我想显示一个低分辨率图像，并在完整页面渲染后开始加载高分辨率图像。 只有当高分辨率图像被完全加载时，我才想用高分辨率图像替换低分辨率图像。

我知道我应该用

$(window).load(function(){ }); 

但是我该如何开始加载某个图像呢？ 我如何知道图像何时加载？

（我知道lazyload的存在，但是这个图像必须是元素的背景，所以我必须使用.css（“background-image”，var）并且我不能使用lazyload。）

Answer 1

使用此脚本预加载图像：

然后根据需要在html中使用低分辨率图像，并在需要时更改为高分辨率图像。 预加载的图像就在那里。

 $(window).load(function(){ $(selector).css('background-image',images[0]); }); 

Answer 2

在你的HTML中