jQuery img src改变不是立竿见影的(jQuery img src change not immediate)

jQuery img src改变不是立竿见影的(jQuery img src change not immediate)

我在一个简单的图库中使用jQuery。 图像fadeOut，src改变，并且它们淡入。

通常，之前的图像会消失; 只有当元素达到完全不透明度时才会显示新图像。

什么可能导致延迟和后续跳转到新图像？

HTML

<div id="slide"> <img src="/img/products/image1.jpg"> </div>

JS

var index = 0; $(function() { if (srcs.length > 1) { setInterval("slide(800, 800)", 6000); } }); function slide(o,i) { index++; if (index == srcs.length) index = 0; $("#slide img").fadeOut(o, function() { $(this).attr("src", path + srcs[index] + ext); $(this).fadeIn(i); }); }

编辑：我把fadeIn()放在fadeOut()的回调中，但现在每次都会出现明显的问题。 图像一直淡出，然后一直淡入， 然后变化。

解决方案：在这个答案中 ， .each()函数在新图像的fadeIn()期间引起了轻微的闪烁，但是删除.each()部分完全修复了这个问题。

I use jQuery in a simple image gallery. Images fadeOut, the src changes, and they fadeIn.

Frequently, the previous image is faded in; only once the element reaches full opacity is the new image displayed.

What could be causing the delay and subsequent jump to the new image?

HTML

<div id="slide"> <img src="/img/products/image1.jpg"> </div>

JS

var index = 0; $(function() { if (srcs.length > 1) { setInterval("slide(800, 800)", 6000); } }); function slide(o,i) { index++; if (index == srcs.length) index = 0; $("#slide img").fadeOut(o, function() { $(this).attr("src", path + srcs[index] + ext); $(this).fadeIn(i); }); }

Edit: I put fadeIn() in fadeOut()'s callback, but now the problem occurs noticeably every time. The image fades out all the way, then fades all the way back in, then changes.

Solution: in this answer, the .each() function caused a slight flicker during the new image's fadeIn(), but removing the .each() portion entirely fixed this.

最满意答案

我建议添加fadeIn函数作为fadeOut的回调函数。 这样就可以确保在加载新图像之前完成-out动画。

请参阅文档： http ： //api.jquery.com/fadeOut/

$('#slide img').fadeOut(o, function() { // Animation complete. // Do fadeIn function here });

I would recommend adding the fadeIn function as a callback function of fadeOut. That way you ensure the -out animation completes before the new image is loaded.

See documentation: http://api.jquery.com/fadeOut/

$('#slide img').fadeOut(o, function() { // Animation complete. // Do fadeIn function here });