加载图像时间不一致（jQuery/PHP/HTML）

我正在使用jQuery创建一个简单的幻灯片放映

我在home.php文件中有一个幻灯片。我有菜单栏。当我在菜单中单击home时，我将home.php加载到主页的content div中。幻灯片和菜单都没有问题。当组合在一起时，它们在第一次加载时工作良好。然而，当多次加载时，时间间隔不是完美的，并且在非均匀辐照加载模式下工作。 这是我在home.php中的代码

<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

$（函数（）{
$（'.fadein img:gt（0）'）.hide（）；
setInterval（函数（）{$（'.fadein:first child'）.fadeOut（）.next（'img'）.fadein（）.end（）.appendTo（'.fadein'）；}，3000）；
});

和在menu.php中

<li><a href=# onclick="$('#content').load('home.php') ;return false">HOME</a></li>
<li><a href=# onclick="$('#content').load('buyitems.php') ;return false">BUY</a></li>
<li><a href=# onclick="$('#content').load('discuss.php') ;return false">DISCUSS</a></li>
<li><a href=# onclick="$('#content').load('locationnear.php') ;return false">NEAR YOU</a></li>

如果你需要详细信息，请告诉我

问题

---

他们每个人都工作得很好。当我在菜单栏上多次单击“主页”时，淡入时间不是恒定的。某些图像加载速度更快，其他图像加载速度较慢。

延迟动画执行的原因可能是jQuery动画队列

新的动画（如

淡出

）将排队等待同一元素上以前的动画完成

要取消当前队列，可以使用

jQuery.stop（）

描述：停止匹配元素上当前正在运行的动画

因此，在您的情况下，这可能如下所示：

$('.fadein :first-child').stop(true, true).fadeOut()

或者禁用此动画的排队

一个布尔值，指示是否将动画放置在效果队列中。如果为false，动画将立即开始

---

编辑

每次单击代码时，都会启动一个新的

setInterval

，这也会向队列中添加动画，因此清除interval可能会有所帮助：

if (window.currenTimer) {
  clearInterval(window.currentTimer);
}
window.currentTimer = setInterval(function(){
  $('.fadein :first-child')
   .stop(true, true)
   .fadeOut()
   .next('img')
   .stop(true, true)
   .fadeIn()
   .end()
   .appendTo('.fadein');
}, 3000);

---

谢谢你的回复。它实际上变得更快而不是更慢。在你的建议之后，我修改了：“

”，但这不起作用。应该在哪里添加代码。我最初在“$（function（）{$（'.fadein-img:gt（0）'）.hide（）之前添加了它这不起作用，所以我不得不尝试添加链接。但是没有一个起作用。有任何建议。你能尝试一步一步地解释应该发生什么吗？没什么奇怪的！为了清晰起见，我将稍微修改命名。我有三个.php文件。一个menu.php，一个index.php，一个slideshow.php菜单包含slideshow作为一个选项。slideshow.php包含slideshow。索引包含单独的div，一个用于菜单，另一个用于容器div。当在索引页中单击slideshow时，我想在容器div中加载slideshow.php。到目前为止一切正常。当我加载页面时，它工作正常。当我在菜单中单击slideshow时，幻灯片将加载到div中并播放动画。问题是：当我在菜单中多次点击幻灯片时，动画……播放速度会随着我在菜单中点击幻灯片次数的增加而加快。希望这更清楚。应该发生的是：无论我在菜单中点击幻灯片一次还是10次或100次，电影都应该以恒定的速度播放。danke！那应该再去哪里？在之前脚本中的“$（function（）{$（'.fadein img:gt（0）”）.hide（）；”是否正确？

if (window.currenTimer) {
  clearInterval(window.currentTimer);
}
window.currentTimer = setInterval(function(){
  $('.fadein :first-child')
   .stop(true, true)
   .fadeOut()
   .next('img')
   .stop(true, true)
   .fadeIn()
   .end()
   .appendTo('.fadein');
}, 3000);