Question

这是一个古老的问题，如何预加载CSS背景图像，但有一点点扭曲：背景图像是通过jQuery设置的，因为它们来自Vimeo。每个背景图像都是来自vimeo的视频图像，因此我在网站加载时使用vimeo缩略图设置背景。我可以以某种方式预加载这些图像吗？我有一个叠加到位，我想在内容加载时消失，但尽管我努力，当叠加层消失时，背景图像仍然明显加载！

以下是我尝试过的一些（不那么雄辩的）代码：

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');
            }
        });
    }
});

有什么想法吗？非常感谢提前。

修改

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

// 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');
    }
});

我试过了：

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

无济于事。

Answer 1

以下内容应该有效：

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

您尝试过的主要问题是您尝试在回调函数中引用$(this)。您必须确保知道this引用的位置。使用jQuery，这将始终是集合中触发回调的目标元素。因此，在上面我看到的示例中，您实际上是在尝试访问临时映像，而不是存根。

Answer 2

如果您确实需要在叠加层消失后100％可见图像，请尝试在加载$(window)时将其删除。

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

但要小心，因为在覆盖消失之前，用户必须等待加载每个内容（内部和外部）。也许你可以添加一个＆＃34;跳过加载＆＃34;链接。

Answer 3

您可以检查图像是否已使用此jQuery函数加载：

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

Answer 4

我使用queryLoader2作为我的预加载器，它解析网站上的图像和背景图像。但是，我通过javascript添加了一些背景图像（而不是将它们写入css或每个元素的样式标记中），因此预加载器无法实际加载这些图像。

在我以每个元素的“样式”标记中包含背景图像属性的方式更改代码后，我能够成功加载图像！

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

4 个答案: