イメージがロードされるまで画像の置換を待つ

Question

私は動作中のスクリプト（thanks stackexchange！）をオンザフライで交換しています。私はギャラリースクリプトとして使用します。これは次のようになります。

  $(".source a").click(function(e){ 
       e.preventDefault(); 
       var $a = $(this); 
       $("#targetcontainer img").hide("puff", function(){ 
        $(this).attr("src", $a.attr("href")).show("fold"); 
       }); 
      }); 

このスクリプトに関する問題は、JQ showコマンドの後に古いイメージがちらつくことです。新しいソースイメージは2番目かそれ以上の後に表示され、奇妙な効果をもたらします。これを防ぐ方法を教えてください。

Answer 1

...

$(".source a").click(function(e) { 
    e.preventDefault(); 

    var newSrc = this.href, 
     image = new Image();  

    image.onload = function() { 
     $("#targetcontainer img").hide("puff", function() { 
      $(this).attr("src", newSrc).show("fold"); 
     }); 
    } 
    image.src = newSrc; 
}); 

Answer 2

最小限の遅延ですべてのブラウザでこの作業を行う最良の方法は、CSS spritesを使用することです。

これはオプションではない場合は、イメージをどこかに事前ロードして非表示にすることができます。ブラウザはイメージを早期に読み込み、JQueryの実行時には遅延しません。 jQueryのはあなたがそれを表示しようとする前に画像をプリロードすることができ

Answer 3

は負荷イベントが存在します。

1）画像を取得します。

var image = $("#img"); 
image.hide(); 

2）ロード時に何かします。

image.load(function(){ 
image.show(); 
}); 

3）imageが変更された後に、load属性をfireイベントに変更します。

image.attr("src","image.jpg"); 

あなたはここでそれについての詳細を読むことができます：http://api.jquery.com/load-event/