2

css の背景画像をプリロードする方法については昔からの質問ですが、少しひねりを加えています。背景画像は、Vimeo からのように jQuery を介して設定されています。各背景画像は 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

$(window)オーバーレイが消えた後に画像を 100% 表示する必要がある場合は、がロードされたときにそれを削除してみてください。

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

ただし、オーバーレイが消える前に、ユーザーはすべてのコンテンツ (内部および外部) が読み込まれるまで待つ必要があるため、注意してください。たぶん、「読み込みをスキップ」リンクを追加できます。

于 2012-09-25T21:19:18.863 に答える
0

サイトの画像と背景画像を解析するプリローダーとして queryLoader2 を使用していました。ただし、(css または各要素のスタイル タグに書き込む代わりに) javascript を介して背景画像の一部を追加していたため、プリローダーはこれらの画像を実際に読み込むことができませんでした。

各要素の「スタイル」タグに背景画像属性を含めるようにコードを変更した後、画像を正常に読み込むことができました!

于 2012-09-27T20:44:21.130 に答える
0

次の jQuery 関数を使用して、画像が読み込まれたかどうかを確認できます。

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