Jquery css背景图像预加载程序

我在制作css背景图像的工作预加载程序时遇到问题。 情况是这样的：我有几个隐藏的元素，每个元素都有一个css背景图像

当用户单击“开始”按钮时，我使用jquery显示元素（一个接一个：一个显示，另一个隐藏）。但是，“开始”按钮应仅在加载所有图像后可用

我正在使用此预加载程序：

function preloadimages(arr) {
    var newimages=[], loadedimages=0
    var postaction=function(){}
    var arr=(typeof arr!="object")? [arr] : arr

    function imageloadpost() {
        loadedimages++
        if (loadedimages == arr.length) {
            postaction(newimages) //call postaction and pass in newimages array as parameter
        }
    }

    for (var i=0; i<arr.length; i++) {
        newimages[i] = new Image()
        newimages[i].src = arr[i]
        newimages[i].onload = function() {
            imageloadpost()
        }

        newimages[i].onerror = function() {
             imageloadpost()
        }
    }

    return { //return blank object with done() method
        done:function(f) {
            postaction = f || postaction //remember user defined callback functions to be called when images load
        }
    }
}

preloadimages('img01','img02','img03')
    .done(function(images) {
        alert(images.length + " images loaded"); 
    });

函数预加载图像（arr）{
var newimages=[]，loadeImage=0
var postaction=function（）{}
var arr=（typeof arr！=“object”）？[arr]：arr
函数imageloadpost（）{
加载图像++
如果（LoadeImage==arr.length）{
postaction（newimages）//调用postaction并作为参数传入newimages数组
}
}
对于（var i=0；i有一个非常好的纯CSS解决方案，用于预加载背景图像，我认为它可以帮助您。它背后的概念是将背景图像放置在一个伪元素上，该元素在页面加载时加载，但未显示。这会导致浏览器加载图像，以便在稍后被另一个元素调用时，它们会自动加载e准备就绪。以下是一些示例代码：

.main-element {
    background-image: url(your_url_here);
}
.main-element:after {
    display: none;
    content: url(your_url_here), url(another_url_here), url(another_url_here), etc.
}
.hidden-element {
    display: none;
    background-image: url(your_url_here);
}
.main-element:hover {
    .hidden-element: display: block;
}

这里有一篇文章的链接，其中有关于这项技术的更多信息：
我成功了！
这是一个非常简单的jquery解决方案：

$(".hidden-element").show(); $(".hidden-element").hide();

用户没有检测到这一点，并且似乎仍然强制浏览器加载图像
加载完成后，我仍然无法使用回调，但ratice中的这项工作似乎很好，但我无法让它工作。可能是因为我仍然需要javascript/jquery根据用户的操作显示元素？无论如何，只有在.show（）之后，图像仍然会加载是执行的这很好它应该仍然可以工作，并且与用于显示元素的任何方法无关。无论如何，图像实际上是加载到一个完全独立的元素（伪元素）上的。我只使用jquery show（）或jquery addClass（）为要显示的元素提供一个类，然后为其设置样式display:block；这是大量不必要的处理，不是处理此问题的非常有效的方法。您应该保持代码干爽，因为您将再次调用show（）或toggle（）在您想要与之交互的元素上，您在这里重复您自己，只是为了加载图像。