2011-12-07 17 views
0

私は現在CakePHPとjqueryを使っています。私は希望の結果の配列を取得しています。その配列を出力として表示する必要があります。配列値の1つに、配列内の値のイメージに対応する「イメージID」が含まれています。私がしなければならないのは、配列のデータ上でマウスの上にマウスを置いたときだけ、それらの画像を表示することです。現在、ページが読み込まれると、すべての画像が読み込まれます。これにより、ページの読み込み時間が長くなります。ホバーアプローチでは、画像が呼び出されるのは、マウスが動いているときだけで、ページが読み込まれていないときではありません。jquery - ホバーを使って画像を表示する

私はjqueryの初心者です。私はちょうどそれができる方法を知りたがっていました。誰かが私に何か出発する方法を示したら、私はこれを取り除くことができます。どんな助けもありがとう。より多くの情報が必要な場合はお知らせください。

HTML::

<div id="showImg">Show Images</div> 

JavascriptをとjQuery: - マウスオーバーのためhttp://api.jquery.com/jQuery.post/ ここ

$('#showImg').mouseover(function(){ 
    $.post('pathToCakeServerPage', function(data) { 
     $('#showImg').append(data); 
    }); 
}); 

ポストのドキュメント

よろしく、 BG

+1

を使用してそのIDを取得したいあなたのCSSセレクタを与えます。ページ内の何かをマウスオーバーするときにサーバーへのAJAX呼び出しを使用する必要があります。 –

+1

あなたが話しているのは、遅延読み込みです...画像をロードするjQueryのための多くのプラグインがありますが(主にページがスクロールされるときを中心に)、代わりにホバー技法を使用するように調整できます – ManseUK

答えて

0

jquery.hover()を使用すると簡単に行うことができます。

$(function() { 
    $("THE CSS SELECTOR YOU WANT TO HOVER").hover(
    function() { 
     $("THE CSS SELECTOR YOU WANT THE IMAGE IN").html('<img src="blabla.jpg" alt="" />'); 
    }) 

}); 

あなたがIDであることがblablaたい場合は、文句を言わないのロード時間を短縮IDを置いて、ページにホバーを追加jqueryの

関連する問題