3 
$('.ro').hover(
    function(){
        t = $(this);
        t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1_o.$2"));
    },
    function(){ 
        t = $(this);
        t.attr('src',t.attr('src').replace('_o',''));
    }
 );

このコードを使用して、(たとえば) クラス 'ro' を持つ test.gif がロールオーバー時に test_o.gif に変更されるようにします。問題は、画像がキャッシュにない場合、ロールオーバーとロールオフに遅延が発生することです。

基本的に、キャッシュをクリアしてテストページにアクセスすると、画像をロールオーバーおよびロールオフするたびにファイルが読み込まれるため、何時間もそこに座っていても、毎回ロールオーバー画像が読み込まれます. ただし、ページを更新すると、画像がキャッシュに保存されるようになり、すぐに機能します。これは、私が達成する必要があることです。

私はこれを使ってみました

http://flesler.blogspot.com/2008/01/jquerypreload.html

これで画像をプリロードするプラグイン

$.preload('.ro');

コードですが、効果がないようです。

何か案は？

4

2 に答える 2

4

準備が整ったドキュメントでダミー画像を作成するだけで、プラグインは必要ありません。

$(function(){
   $('<img />').attr('src',url);
});
于 2009-07-09T11:41:57.743 に答える
0

jQuery を使用した画像のプリロードに関するものとあなたのものを組み合わせると、画像をプリロードし、指定されたセレクターを使用して画像をホバーする短いスクリプトが得られます。例えば

    //preload images
    $('.ro').each(function(){
        $('<img/>').appendTo('body')
            .css({ display: "none" })
            .attr('src',$(this).attr('src').replace(/([^.]*)\.(.*)/, "$1_on.$2"));
    });
    //hover them
    $('.ro').hover(
        function(){
            t = $(this);
            t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1_on.$2"));
        },
        function(){ 
            t = $(this);
            t.attr('src',t.attr('src').replace('_on',''));
        }
     );

このアプローチは、IE が DOM に追加されていない画像を破棄する問題に対処するためにそれらを body タグに追加します (これに関連する他の投稿で述べたように)。

事前に画像の配列を宣言する必要がなく、ロールオーバーとクラス名の命名規則を採用するだけでソートされるため、この投稿のアプローチが気に入っています。

于 2010-05-19T08:27:50.797 に答える