Jquery HoverイメージとAltテキスト実行命令？

Question

私は非常に単純なjQueryスクリプトを使って画像を変更し、サムネイルが表示されたらaltテキストを表示します。

画像と代替テキストの両方が同じdivに表示されます。コードは動作しますが、テキスト表示画像の変更前とそう簡単に長いaltテキストのためのdivのサイズを変更します：私は第一これらの二つのように画像が変化して、altテキストを注文する必要が

$("#thumbwrapper li img").hover(function(){ 
    $('#main_img').attr('src',$(this).attr('src').replace('thumb/', '')); 
    $("#desc").html($(this).attr("alt")); 
}); 

を。私は2番目の関数を入れ子にする必要があると推測していますが、方法はわかりません。 これは（ネスティング機能の私の推測です）それだけaltテキストの変更を破る：

$("#thumbwrapper li img").hover(function(){ 
    $('#main_img').attr('src',$(this).attr('src').replace('thumb/', ''),function(){ 
     $("#desc").html($(this).attr("alt")); 
    }); 
}); 

Answer 1

テキストを表示する前に遅延（500）の呼び出しを追加できませんでしたか？このように：あなたはdiv要素の中にALTを書き込む前に、そのSRCを設定した場合、loadイベントの後に終了イベントので、IMGがロードされた非同期に取得しているので、

$("#desc").delay(500).html($(this).attr("alt")); 

Answer 2

です。 あなたは（迅速かつ汚い）setTimeout関数を使用するか、IMGのloadイベントを使用することができます。

var image =new Image(); 
image.src="your path"; 
image.load=function(){ 
    $("#desc").html($(this).attr("alt")); 
} 

image.load(); 

//add the image into the DOM here 

は、これは非常にクリーンなソリューションです。

Answer 3

私はあなたがイメージをプリロードする場合、それはあなたのために高速に動作すると思います：

var image = new Image(); image.src = // image source 

これは、画像をダウンロードすると、それはあなたがimgタグのsrcを設定何ラグタイムあってはならないブラウザの原因となります。

Answer 4

他のほとんどの回答のように、Javascriptイメージのプリロードの問題の古典的なケースのように見えます。私はしばしばJavascriptのプリロード機能を使用しています。私は2centsの答えを別のオプションとして与えたいと考えています。 :)また

$("#thumbwrapper li img").hover(function() 
{ 
    // prepare the variables... 
    var source = $(this).attr('src').replace('thumb/', ''); 
    var description = $(this).attr("alt"); 

    // start the preload... 
    // might think of putting a loader message in your app somewhere in case 
    // this takes longer than expected... 
    var img = new Image(); 
    img.onload = function() 
    { 
     $('#main_img').attr('src', source); 
     $("#desc").html(description); 
    }; 

    // finally, start the preload... 
    img.src = source; 

}); 

Answer 5

、いくつかのより一般的なアドバイス：（あなたがATTR（）3つの引数を与えることができない）、そして行くと「チェーン化」をよく読んで推測するのではなく、jQueryのAPIを学びます。

連鎖を理解できない場合は、多くのjQueryを間違った方法で記述します。簡単な説明はここにあります：Quick Guide: Chaining in jQuery