2

我在为 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 背景图像上工作吗？还是它们仅用于标签？

4

2 回答 2

5

有一个非常好的纯 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

于 2013-02-03T10:38:39.407 回答
0

我让它工作了！这是一个非常简单的 jquery 解决方案：

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

用户没有检测到这一点，并且似乎仍然强制浏览器加载图像我在加载完成后仍然无法使用回调，但是这项工作在 ratice

于 2013-02-03T13:42:12.037 回答