如何保持ImageSwap平滑的jQuery [英] How to keep ImageSwap smooth jquery

问题描述

我发现此脚本可以在悬停时更改图像.

i found this script to change images on hover.

$(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

But now i'm having the problem, that i want a smooth/soft transit and not that, what it does now. Here you can find a fiddle: JSfiddle

谢谢，祝您星期天愉快！

Thanks and a nice sunday!

推荐答案

对我来说交换非常顺利.交换方法可能会很大程度上取决于用户计算机的浏览器，操作系统和硬件规格，因为您正在通过JS更改src图像方面进行了大量工作.

It is swapping very smoothly for me. Your swapping method is probably going to depend a lot on the browser, OS, and hardware specs of the user's computer, as you're doing a lot of work in changing the image src via JS.

虽然浏览器通常足够智能，可以缓存先前加载的图像并易于访问，但是您的方法在第一次转换时就不会总是很顺畅，因为在更改src之前，浏览器才知道新图像，这时浏览器开始下载图像.不幸的是，您还试图在此时显示图像，因此在显示图像但未实际加载时会有些断开.

While browsers are usually intelligent enough to keep previously-loaded images cached and easily reachable, your method won't always be smooth on that first transition because the browser doesn't know about the new image until you change src, at which point the browser starts downloading the image. Unfortunately, you're also trying to show the image at this point, so there will be some disconnect while the image is shown but not actually loaded.

一种更简单的方法是将两个图像都已经加载到页面上(因此有两个<img>标签)，然后隐藏一个.然后在翻转时，交换隐藏的一个和显示的一个，然后在不悬停时交换回去.这种交换效果可以完全在CSS中实现，它将比JS更快.由于第二个图像已经在页面上，因此它还将在用户交互之前预加载隐藏的图像，这样您就可以立即开始从平滑的过渡到隐藏的图像.

An easier way would be to have both images already loaded onto the page (so have two <img> tags), and hide one. Then on rollover, swap which one is hidden and which is shown, and swap back when not hovering. This swapping effect can be achieved purely in CSS, which will be faster than JS. It will also pre-load the hidden images before user interaction since the second image is already on the page, so that you can immediately start with a smoother transition to the hidden image.

我已经使用以下代码修改了小提琴.我在<a>中添加了一个类，并添加了第二个<img>而不是使用hover attr.一些HTML注释:hover是<img>上的无效属性(或与此相关的任何其他元素).您应该改用data-hover(如果有的话)，它遵循标准HTML5 data-*自定义属性规范，但是对于此CSS解决方案，我们将不需要它.另外，您在小提琴中缺少一个闭合的</div>标记.

I've modified your fiddle with the below code. I added a class to <a>, and added a second <img> instead of using the hover attr. A couple of HTML notes: hover is an invalid attribute on <img> (or any other element for that matter). You should use data-hover instead, if anything, which follows the standard HTML5 data-* custom attribute spec, but we won't need it for this CSS solution. Also, you were missing a closing </div> tag in your fiddle.

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:

没有！

这篇关于如何保持ImageSwap平滑的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！