Как сохранить плавность ImageSwap jquery

Я нашел этот скрипт для смены изображений при наведении.

$(document).ready(function() {
$('.rollover').hover(function() {
    swapImage(this);
}, function() {
    swapImage(this); 
    });
 });

function swapImage(image) {
    var current = $(image).attr('src');
    $(image).attr('src', $(image).attr('hover'));
    $(image).attr('hover', current);

 }

Но теперь у меня проблема, что я хочу плавный/мягкий транзит, а не то, что он делает сейчас. Здесь вы можете найти скрипт: JSfiddle

Спасибо и хорошего воскресенья!


jquery swap smooth
person preissy    schedule 10.11.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У меня очень плавно переключается. Ваш метод подкачки, вероятно, будет во многом зависеть от браузера, ОС и аппаратных характеристик компьютера пользователя, поскольку вы выполняете большую работу по изменению изображения src через JS.

Хотя браузеры обычно достаточно умны, чтобы хранить ранее загруженные изображения в кэше и легкодоступными, ваш метод не всегда будет гладким при первом переходе, потому что браузер не знает о новом изображении до тех пор, пока вы не измените src, после чего браузер начинает загрузку изображения. К сожалению, вы также пытаетесь показать изображение в этот момент, поэтому будет некоторое отключение, пока изображение отображается, но фактически не загружается.

Более простым способом было бы загрузить оба изображения на страницу (поэтому используйте два тега <img>) и скрыть одно. Затем при опрокидывании поменяйте местами, какие из них скрыты, а какие показаны, и поменяйте местами обратно, когда не зависаете. Этот эффект подкачки может быть достигнут исключительно в CSS, который будет быстрее, чем JS. Он также будет предварительно загружать скрытые изображения перед взаимодействием с пользователем, поскольку второе изображение уже находится на странице, так что вы можете сразу начать с более плавного перехода к скрытому изображению.

Я изменил вашу скрипку с помощью приведенного ниже кода. Я добавил класс к <a> и добавил второй <img> вместо использования атрибута hover. Пара замечаний по HTML: hover является недопустимым атрибутом <img> (или любого другого элемента, если на то пошло). Вместо этого вы должны использовать data-hover, если что, что соответствует стандартной спецификации пользовательских атрибутов HTML5 data-*, но нам это не понадобится для этого решения CSS. Кроме того, в вашей скрипке отсутствовал закрывающий тег </div>.

HTML:

<div class="col-1">
    <a class="rollover-container" rel="img_gal" href="gal/m.jpg">
        <img class="rollover"  src="http://schanzenstrasse.de/gal/c1_sw.jpg"/>
        <img class="rollover-swap" src="http://schanzenstrasse.de/gal/c1.jpg"/>
    </a>
</div>

CSS:

.rollover-swap {
    display: none; /*Hide the rollover image*/
}

.rollover-container:hover .rollover {
    display: none; /*If we hover over the <a>, then hide the normal image*/
}

.rollover-container:hover .rollover-swap {
    display: inline; /*If we hover over the <a>, then show the rollover image*/
}

JS:

Никто!

person ajp15243    schedule 10.11.2013