jquery背景画像プリロード

Question

私は多くのdiv.imageを持っていますが、それぞれに大きなサイズがあります。 divバックグラウンドのロード中にloader imageを追加し、バックグラウンドのロードが完了した後にloader imageを削除するにはどうすればよいですか？ HERE

$('.image').append('<img src="image/loading.gif" class="loading" />'); 

<div class="image" style="background:url(https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG) 0 0 no-repeat;width:720px;height:478px;overflow:hidden;"></div> 

Answer 1

$('.image').append('<img src="image/loading.gif" class="loading" />'); 

$.get("https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG", function(data){ 
    $('.image').html(data); 
}); 

---

異なるバージョン（作品）です：

フィドル：http://jsfiddle.net/maniator/ucdju/

var loading = $('<img src="image/loading.gif" class="loading" />'); 
$('.image').append(loading); 

var image = $('<img>').attr('src', 'https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG'); 

image.bind('load', function(data){ 
    $('.image').css('background-image',"url("+this.src+")") 
     .width(this.width).height(this.height); 
    loading.remove(); 
}); 

Answer 2

<style type="text/css"> 
    .image { 
     background: url(image/loading.gif) center center no-repeat; 
    } 
</style> 

<div class="image"> 
    <div style="background:url(https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG) 0 0 no-repeat;width:720px;height:478px;overflow:hidden;"></div> 
</div> 

はこの方法であなたのdiv.imageを背景として、ローダを持っており、イマそれは単にバックグラウンドをカバーします。

1つのdivタグで複数の背景を使用しますが、すべてのブラウザでサポートされていないため、divを追加しました。

Answer 3

背景画像はバグです！背景を使用する

jQueryモバイルでのdiv背景画像の読み込みは、約50％の時間で成功しています。したがって、jqmアプリケーションをコーディングするすべての人は、div背景イメージが確実に表示されるように見えるようになります（可視、表示、ロード、ロード）。 .LOAD（）イベント（.on（「負荷」..）のためのjqmドキュメントエントリを愛しています。基本的に.LOAD（）は互換性がありません、クロスブラウザで、その後は何の解決策を提供しないと言います。

誰かが全焼jQueryドキュメントサイト

@Neilコードは、1つのHUGEの脆弱性で動作します。どの@Moeが解決策を提供しますが、彼の説明は誤解を招くような境界線ではありません。@Moe cssには欠けている宝石があります。 「背景画像は機能せず、背景は！」

@Moeのcssチップを確認します。

http://www.webmasterworld.com/css/3557554.htm

$('#somediv').waitForImages(function() { 
    console.log("Images done loading"); 
}, 
function(loaded, count, success) { 
    var $imageDiv = $(this); 
    var url = $imageDiv.css('background-image'); 
    var lngDivWidth = $imageDiv.css('width'); 
    var lngDivHeight = $imageDiv.css('height'); 
    var bckgnd_src = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); 
    //hardcoded just for demonstration purposes. 
    bckgnd_src = 'https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG'; 

    if (!success) { 
    var $cacheImage = $('<img id="tempImg" />').attr('src', bckgnd_src).on('load', 
         function(e) { 
          $imageDiv.css('background', 'url('+bckgnd_src+')'); 
          $imageDiv.width(lngDivWidth).height(lngDivHeight); 
         }); 
    } 
    //jqm takes all opportunities to fail. Force display again. 
    $imageDiv.css('background', 'url('+bckgnd_src+')'); 
}, true); 

が本当にこれをテストするための完全なソリューションは、複数のページjqmアプリが必要です。ページ間のナビゲーションでページあたり10枚の画像

このコードが実行されていない場合でも、完全にキャッシュされたページだけが混乱します。どのようにこの機能がキャッシュされたページでも実行できるようにするには、Plzの誰かの提案。

（も不可解なドキュメントとの）依存WaitForImagesプラグイン

https://github.com/alexanderdickson/waitForImages