jquery/javascriptでimgスワップを高速化する方法はありますか？

Question

私は少し曖昧な質問があります。私は自分のコードで次のようにしています：http://jsfiddle.net/PMnmw/2/

jsfiddleの例では、スムーズに動作します。画像はすばやくスムーズにスワップされます。しかし、それが私のコードベースにあるときは、明確な遅れがあります。

私はその遅れがなぜ起こっているのか理解しようとしています。 jqueryの構造は上記とまったく同じです。私。 $（document）.ready（...）関数の中で、ユーザーが（クラス名に基づいて）imgをクリックしたかどうかを確認してから、jsfiddleと同じコードを実行します。

私はここで何をすべきかを考えようとしています...明らかに私はスワップの権利をやっていない、または私はそれをやることに非常に重いです。これに先立って、私の同僚の一人がAJAXを使ってスワップを行っていましたが、それはもっと重い義務（他のアイコンを手に入れようと完全に本物の要求を受けています...）です。

Answer 1

表示されないイメージは、通常、表示される前にブラウザによって読み込まれません。問題があると思われる場合は、イメージを最適化するためにRIOTやpngCrushのようなイメージオプティマイザをダウンロードしてください。 矢印が2つしかない場合は、それらをCSSスプライトに結合することを検討する必要があります。

jQueryを使ってすべてをやってみることもできますが、それほど大きな違いはありません。

隠し画像JSにロードされ、いくつかの横行は、jQueryの外で行わ（しかし、コードがシンプル画像スワップのために過度に長いようだが、それは、おそらく問題ないですか？）と、おそらくこのような何か、：

$(document).ready(function() { 
    var img=new Image(); 
     img.src='http://i.imgur.com/ZFSRC.png'; //hidden image url 

    $(".wrapper").click(function(e) { 
     if(e.target.className=='toggle_img') { 
      $('.toggle_img').toggle(); 
      if (e.target.parentNode.childNodes[1].style.display=='none') { 
       console.log("hello"); 
      } else { 
       console.log("goodbye"); 
      } 
     } 
    });  
}); 

FIDDLE

Answer 2

私はあなたのフィドルを変更した：あなたが参照するためにDOMをナビゲートする必要がないように

1. は、両方img1とimg2のための変数を作成：私は最適化されてきた

   物事http://jsfiddle.net/PMnmw/12/これらの2つの画像はもはやなくなり、パフォーマンスが向上します。

2. クリックハンドラーをイメージ自体に適用したので、ラッパーの子を検索する必要はありません。
3. 基本的な考え方は、可能な限りjqueryの選択肢の数を減らすことでした。

これがスピードアップに役立つかどうか教えてください。

$(document).ready(function() { 
    var img1 = $('#img1'); 
    var img2 = $('#img2'); 

    $(".toggle_img").click(function(e) { 
     var target = $(e.target); 
     if(target.is(img1)){ 
      img1.hide(); 
      img2.show(); 
     } 
     else if (target.is(img2)) { 
      img2.hide(); 
      img1.show(); 
     } 
    }); 
});