Как ускорить jQuery заменить изображение при наведении - PullRequest
Новая
       24

Как ускорить jQuery заменить изображение при наведении

0 голосов
/ 31 мая 2018

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

Проблема в том, что когда мышь быстро перемещается от одного «предмета» к другому, она испортила изображения.

Как это исправить?

HTML: 

<div class="items">
    <div class="item">
        <a href="#">
            <img src="img/icon1.png" data-original="img/icon1.png" data-hover="img/icon1-hover.png">
            <span>Title</span>
        </a>
    </div>

    <div class="item">
        <a href="#">
            <img src="img/icon2.png" data-original="img/icon2.png" data-hover="img/icon2-hover.png">
            <span>Title</span>
        </a>
    </div>

</div>

JS: 

$('.items .item a').hover(function(){
newsrc = $(this).children('img').data("hover");
$(this).children('img').fadeOut(100, function() {
    $(this).attr('src', newsrc).fadeIn();
}); 
}, function(){
    oldsrc = $(this).children('img').data("original");
    $(this).children('img').fadeOut(100, function() {
        $(this).attr('src', oldsrc).fadeIn();
    });
});

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Я знаю, что вы спрашивали, как это сделать с помощью jQuery, но, пожалуйста, позвольте мне предложить другое решение.Обычно, когда нет необходимости использовать javascript (особенно в настоящее время jQuery), я стараюсь избегать его, если могу получить тот же результат, используя только CSS .

Я верю, что правильно вас понимаючто вы пытаетесь показать с появлением и исчезанием изображения при наведении, чтобы заменить другое изображение.

Код ниже делает это без JavaScript.Существует ловушка, из-за которой вы будете загружать изображения, которые, возможно, никогда не будут отображаться, поэтому, возможно, вы захотите лениво загрузить изображения, которые должны исчезнуть при использовании javascript.

Удачи, и пусть сила будет с вами. 

 .items {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }  
 .items .item {
        width: 400px;
        height: 400px;
        display: block;
        position: relative;
    }
 .items .item span{
        position: absolute;
        left: 0;
        right: 0;
        top: 20px;
        text-align: center;

    }
 .items .item img:nth-child(2){
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 1s;
    }
 .items .item:hover img:nth-child(2){
        opacity: 1;
    }
    <div class="items">
        <div class="item">
            <a href="#">
                <img src="http://www.facetheforce.today/han-old/400" alt="Han Solo Old">
                <img src="http://www.facetheforce.today/han/400" alt="Han Solo">
                <span>Han Solo</span>
            </a>
        </div>
        <div class="item">
            <a href="#">
                <img src="http://www.facetheforce.today/luke-old/400" alt="Luke Old">
                <img src="http://www.facetheforce.today/luke/400" alt="Luke">
                <span>Luke</span>
            </a>
        </div>
    </div>
0 голосов
/ 31 мая 2018 
newsrc = $(this).children('img').data("hover");
oldsrc = $(this).children('img').data("original");

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

Поставьте var перед ними, чтобы сделать переменные уникальными для каждого вызова функции. 

var newsrc = $(this).children('img').data("hover");
var oldsrc = $(this).children('img').data("original");
...