jQuery Rollovers Not Preloading

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

Я использую этот код так, чтобы (для примера) test.gif с классом 'ro' изменился на test_o.gif при опрокидывании, проблема в том, что изображения не находятся в кеше есть отставание при опрокидывании и роллоффе.

В принципе, если я очищаю свой кеш и посещаю тестовую страницу, каждый раз, когда я прокручиваю и откатываю изображение, он каждый раз загружает файл, поэтому вы можете сидеть там часами и все равно загружать изображения опрокидывания каждый раз. Однако, когда я обновляю страницу, и изображения теперь находятся в кеше, она работает мгновенно, чего я должен достичь.

Я попытался использовать этот

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

плагин для предварительной загрузки изображений с этим

$.preload('.ro'); 

кода, но это, кажется, не имеют никакого эффекта.

Любые идеи?

Answer 1

Просто создайте фиктивный образ (ы) на doc ready, нет необходимости в плагине.

$(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','')); 
     } 
    ); 

Этот подход, добавляя их в тег тела, чтобы справиться с проблемой IE отбрасывая изображения, которые не добавлены в DOM (как уже упоминалось в другой должности, относящейся к этому), но вы могли бы придерживаться их везде, что имеет смысл для вас.

Мне нравится подход в этом сообщении, поскольку вам не нужно заранее объявлять массив изображений, просто используйте соглашение об именах для опрокидывания и имя класса, и вы отсортированы.