需要预加载背景图像的方法答案

【问题标题】：Need way to preload background images需要预加载背景图像的方法
【发布时间】：2012-08-30 19:12:03
【问题描述】：

我需要一种通过 vanilla JS 或 jQuery 预加载背景图像的方法。我用的是纯CSS3 bg画廊，就是一个普通的ul，每个li代表完整的bg图片。

没有 img 标签，每个 li 使用 css background-image 属性。我有四个画廊，每个画廊都由 AJAX 应要求加载。

如果有人可以指出一些示例，或者一些脚本可以帮助我为每个画廊预加载图像，那么当加载画廊时，图像已经预加载。

您可以在http://www.madebym.net/test/index.html查看测试站点

只有第一组链接有效，每个链接都指向新画廊。

【问题讨论】：

stackoverflow.com/questions/476679/…

标签： jquery ajax preloading

【解决方案1】：

我有一个全局实用程序函数，用于处理任何图像预加载（您可以将图像数组传递给它）。

    $.preloadImages = function () {
        for (var i = 0; i < arguments.length; i++) {
            $('<img>').attr('src', arguments[i]);
            // For testing purposes: 
            //console.log('\n\u2713 Successfully Preloaded Image :: ');
            //console.log($('<img>').attr('src', arguments[i]));
        }
    }

用途是：

    $.preloadImages('test.jpg', 'test2.jpg'); // put all your images in there

但基本上你只是在创建一个空白$('img')。希望对您有所帮助！

【讨论】：

谢谢，但我没有使用任何 img 标签。我需要一种方法来预加载使用 css background-image 属性的 li 元素。
这些图片没有放在页面上，但是图片会被预加载到你的缓存中，所以一旦你把它们放在<li>元素中，它们就会出现瞬间
不确定我是否正确...图像不会出现在页面上，但由于它们被缓存，它们将被 background-size 属性使用？
哦不，我只是说它们被缓存了，你现在可以加载它们，将它们设置为 li 背景图像等，而不必担心它们会加载
我可能会将它放在所有页面上的某个文件中，然后将您的图像数组放入其中，繁荣。