Ролловеры jQuery не загружаются - PullRequest
Новая
       13

Ролловеры jQuery не загружаются

3 голосов
/ 09 июля 2009 
$('.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');

код, но, похоже, не имеет никакого эффекта.

Есть идеи?

Ответы [ 2 ]

4 голосов
/ 09 июля 2009

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

$(function(){
   $('<img />').attr('src',url);
});
0 голосов
/ 19 мая 2010

Объедините свой с одним на Предварительная загрузка изображений с помощью 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',''));
        }
     );

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

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

...