Javascript 在html页面完全加载之前预加载背景图像

我正在用WordPress和Bootstrap为我的个人网站创建一个新主题。除了在主页中预加载图像外，一切都正常。我一共有8张图片，4张在上面，另外4张只出现在鼠标上方。所有图像都是列容器中的背景图像。我的问题是页面加载器对于4个最上面的图片工作得很好，但是其他4个没有用加载器加载，而是在鼠标上加载

我怎样才能解决这个问题？ 如何在页面完全加载之前预加载所有8幅图像

以下是加载程序的代码：

$（窗口）.load（函数（）{
$（“.loader”）.fadeOut（“慢”）；
})
功能预加载（阵列图像）{
$（arrayOfImages）.each（函数（）{
$('
以下是主要的CSS和HTML：

这是主页
您可以使用悬停功能，而不是创建4个额外的资源。您不需要任何脚本来预加载图像。这不是关于模糊图像，我只是想知道是否有方法预加载所有8个图像？将其他图像添加到
阵列图像中，您也可以检查，或者结合使用。