如何使用jQuery预加载非硬编码的背景图像？

如何预加载css背景图像是一个由来已久的问题，但有一点扭曲：背景图像是通过jQuery设置的，就像它们来自Vimeo一样。每个背景图像都是来自vimeo的视频图像，因此我在加载站点时使用vimeo缩略图url设置背景。我可以预装这些图片吗？我有一个覆盖的地方，我想消失时，内容加载，但尽管我的努力，背景图像仍然明显加载时，覆盖消失

以下是我尝试过的一些代码（不是很有说服力）：

var count = $('.video_stub').length;    
$('.video_stub').each(function(index) {
    var bgUrl = $(this).data('thumb');
    $('<img/>')[0].src = bgUrl;
    if(index == (count - 1)) {
        $('.video_stub').each(function(i) {
        var bgUrl = $(this).data('thumb');
        // Set the video thumb's background using the vimeo thumb image
        $(this).css('background-image', 'url(' + bgUrl + ')');
            if(index == (count - 1)) {
                $('#temp_overlay').fadeOut('slow');
            }
        });
    }
});

var count=$（'.video_stub'）。长度；
$（'.video_stub'）。每个（函数（索引）{
var bgUrl=$（this.data（'thumb'）；
$('
有什么想法吗？非常感谢

编辑：

我尝试了这段代码，但没有成功。我想知道这是否是一个范围问题？可能我无法从加载回调中访问索引变量：

// Set video thumb click handler
var count = $('.video_stub').length;

// Set video thumb click handler
// Iterate through each video stub
$('.video_stub').each(function(index) {
    var bgUrl = $(this).data('thumb');
    $('<img/>').attr('src', bgUrl).load(function() {
        $('.video_stub:eq(' + index + ')').css('background-image', 'url(' + bgUrl + ')');
    });
    if(index == (count - 1)) {
        $('#temp_overlay').fadeOut('slow');
    }
});

//设置视频拇指点击处理程序
变量计数=$（'.video_stub'）。长度；
//设置视频拇指点击处理程序
//遍历每个视频存根
$（'.video_stub'）。每个（函数（索引）{
var bgUrl=$（this.data（'thumb'）；
$('
我试过：

$('<img/>').attr('src', bgUrl).load(function() {
    $(this).css('background-image', 'url(' + bgUrl + ')');
});

$（'
无效。
如果您确实需要在覆盖消失后100%可见图像，请在加载
$（窗口）
时尝试将其删除

if(index == (count - 1)) {
    $(window).on('load',function(){
        $('#temp_overlay').fadeOut('slow');
    }
}    

但要小心，因为用户必须等待每个内容（内部和外部）加载，然后覆盖才会消失。也许您可以添加一个“跳过加载”链接。
您可以使用此jQuery功能检查图像是否已加载：

$('img').load(function() {
        $('#temp_overlay').fadeOut('slow');
});

以下方面应起作用：

var video_stubs = $('.video_stub');
var loaded = [];
video_stubs
  .each(function(){
    /// store stub as a var so we can correctly access it in the callback
    var stub = $(this);
    /// get the URL as usual
    var bgURL = stub.data('thumb');
    /// create a temporary image that tells the browser to load a specific
    /// image in the background
    $('<img />')
      /// define our load event before we set the src value otherwise the
      /// load could happen from cache before we've even defined a listener
      .load(function(){
        /// set the background image $(this) no longer points to stub,
        /// it actually points to the temporary image.. so instead
        /// use the stub var we've created outside of this scope
        stub.css('background-image', 'url(' + bgURL + ')');
        /// store a list of what we've loaded - mainly for the loaded.length 
        /// count - but storing this information could be useful elsewhere
        loaded.push( bgURL );
        /// test that we've all loaded (remember this can occur in any order)
        /// so keeping an incrementing count is better than assuming the last
        /// image we try and load will be the last image to load completely.
        if ( loaded.length == video_stubs.length ) {
          /// finalise only after all is loaded
          $('#temp_overlay').fadeOut('slow');
        }
      })
      /// set the src value, once loaded the callback above will run
      .attr('src', bgURL)
    ;
  })
;

var video_stubs=$（'.video_stub'）；
加载的var=[]；
视频存根
.each（函数（{
///将存根存储为var，以便我们可以在回调中正确访问它
var存根=$（此）；
///像往常一样获取URL
var bgURL=stub.data（'thumb'）；
///创建一个临时图像，通知浏览器加载特定的
///背景中的图像
$('
您已经尝试的主要问题是，您正在尝试引用
$（此）
在回调函数中。您必须确保知道此
引用的位置。对于jQuery，这将始终是集合中触发回调的目标元素。因此，在我上面看到的示例中，您实际上是在尝试访问临时映像，而不是存根。
我使用的是queryLoader2作为我的预加载程序，它解析站点上的图像和背景图像。但是，我通过javascript添加了一些背景图像（而不是将它们写入css或每个元素的样式标记），因此预加载程序无法实际加载这些图像

在我以一种在每个元素的“样式”中包含背景图像属性的方式更改代码之后tag，我能够成功加载图像！
感谢编辑j08691，这并不意味着要留下这么多任意的空间：POP谈论的是背景图像，所以这不起作用……无论如何，你的起点比我的好，但很难为他添加的每一幅图像添加一个侦听器：-）是的…另一个解决方法是使用以下函数，确保在预加载图像后采取某些操作：它适用于图像，只要您首先定义每个图像变量，就可以动态检索图像。我使用$（document）.ready，但我不认为这会有什么帮助，因为背景图像是通过Javascript加载的。似乎它在$（窗口）之后仍然具有相同的效果.load函数将在加载图像之前启动。在包含图像后添加侦听器…检查我的编辑哦，我明白了！哇，你不是在开玩笑加载时间。大约一整分钟。似乎很长。我觉得如果我可以只针对css背景图像，这将有助于更合理的预加载程序。是的，我这么认为（可能，但可能整分钟只是由Vimeo拇指加载引起的）但是我想不出一种方法来给所有的人添加一个侦听器…让我更想考虑缓存图像服务器端，因为上传的视频不会改变。也许这是一个更明智的解决方案？它实际上会减少从服务器加载而不是Vimeo服务器的加载时间吗？我喜欢这个解决方案，一个d这是有道理的，但不知何故，在覆盖层消失后，背景图像并没有加载…我不知道为什么！这段代码似乎应该工作得很好。@GionaF谢谢：）Hendeca您是否已尝试添加警报/console.log以确保bgURL设置了正确的背景路径…并且背景路径实际上可以作为图像查看（即，在浏览器中粘贴路径并确保其加载）-除此之外，我不确定建议什么（没有看到您站点的实际示例）@Hendeca还有，你是如何在存根上定义你的“拇指”数据的？@pebbl哦，天哪，我不得不把这算是我又一个史诗般的蠢事。我愚蠢地将vimeo拇指url作为数据属性，而不是在生成视频存根元素时只内联编写样式。现在我可以使用传统的预加载程序：P对不起，伙计们，我我是个白痴！把它留给其他人吧，他们会发现@pebbl reply；）很有用，并为你的最新情况提出一个新问题