css 背景图片预加载器答案

【问题标题】：css background images preloadercss 背景图片预加载器
【发布时间】：2013-02-03 01:20:10
【问题描述】：

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

【问题讨论】：

标签： jquery css background preloader image-preloader

【解决方案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

【讨论】：

看起来不错，但我无法让它工作。可能是因为我仍然需要 javascript/jquery 来根据用户的操作来显示元素？无论如何，仅在执行 .show() 后图像仍会加载
完全没问题，它应该仍然可以工作，并且与您用来显示元素的任何方法无关。无论如何，图像实际上是在完全独立的元素（伪元素）上加载的。我只会使用 jquery show() 或 jquery addClass() 为要显示的元素提供一个类，然后设置它的显示样式：block;

【解决方案2】：

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

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

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

【讨论】：

这是很多不必要的处理，并且不是处理此问题的非常有效的方法。您的目标应该是保持代码 DRY，并且由于您将再次必须在要与之交互的元素上调用 show() 或 toggle()，所以在这里重复自己只是为了加载图像。