css背景图像预加载器

Question

我在为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"); 
    });

但是,这只加载1张图像.

我也尝试了其他一些代码,没有结果.图像预加载器是否应该在css背景图像上工作？或者它们仅用于标签？

Answer 1

有一个非常好的纯CSS解决方案,用于预加载背景图像,我认为可以帮助你.它背后的概念是将背景图像放置在页面加载但未显示时加载的伪元素上.这会导致浏览器加载图像,以便稍后由另一个元素调用它们时,它们就可以运行了.这是一些示例代码:

.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;
}

这是一篇文章的链接,其中包含有关此技术的更多信息:http://www.thecssninja.com/css/even-better-image-preloading-with-css2