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

Question

我正在使用WordPress和Bootstrap为我的个人网站制作一个新主题。除了在主页面中预加载图像外，一切正常。我总共有8个图像，4个在顶部，另外4个仅在鼠标悬停时显示。所有图像都是列容器中的背景图像。我的问题是页面加载器适用于4个顶级图像，但其他4个不能加载加载器，而是加载鼠标悬停。

我该如何解决这个问题？ 如何在页面完全加载之前预先加载所有8个图像？

以下是加载程序的代码：

$(window).load(function() {
    $(".loader").fadeOut("slow");
})
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;

    });
}

这是主要的CSS和HTML： http://jsfiddle.net/qhmmnz1p/

这是主页面 http://eco-greece.com