jQueryロールオーバーがプリロードされていない

Question

$('.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に変更されるようにしました。問題は、画像がキャッシュにないときですロールオーバーとロールオフに遅れがあります。

基本的には、キャッシュをクリアしてテストページにアクセスすると、イメージをロールオーバーしてロールオフするたびにファイルがロードされるため、そこに座っていても毎回ロールオーバーイメージがロードされます。しかし、私がページをリフレッシュしてイメージがキャッシュに入ったらすぐに動くので、これは私が達成する必要があるものです。

私はこの

$.preload('.ro'); 

コードで画像をプリロードするために、この

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

プラグインを使用して試してみたが、効果がないようです。

アイデア？

Answer 1

ダミーイメージを作成するだけで、プラグインは必要ありません。

$(function(){ 
    $('<img />').attr('src',url); 
}); 

Answer 2

Preloading images with 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','')); 
     } 
    ); 

このアプローチは、DOMに追加されませんIE廃棄画像の問題に対処するためにbodyタグにそれらを追加している（これに関連する他の記事で述べたように）しかし、あなたは固執することができあなたにとって理にかなったどこにでも置けます。

私は前回の画像の配列を宣言する必要がないので、ロールオーバーとクラス名の命名規則を採用するだけで、ソートされます。