2

如何预加载 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');
            }
        });
    }
});

有任何想法吗？提前非常感谢。

编辑：

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

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

无济于事。

4

4 回答 4

2

以下应该有效：

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，这将始终是集合中触发回调的目标元素。因此，在我上面看到的示例中，您实际上是在尝试访问临时映像，而不是存根。

于 2012-09-25T22:00:38.920 回答
1

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

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

但要小心，因为用户必须等待所有内容（内部和外部）都被加载，然后覆盖消失。也许您可以添加“跳过加载”链接。

于 2012-09-25T21:19:18.863 回答
0

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

$('img').load(function() {
        $('#temp_overlay').fadeOut('slow');
});
于 2012-09-25T21:21:09.313 回答
0

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

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

于 2012-09-27T20:44:21.130 回答