Load Image time inconsistant (jQuery/PHP/HTML)

Question

I am using jQuery to create a simple slide show.

I have a slideshow in home.php file. I have a menubar. when I click home in the menu, I load home.php in the content div of main page. There is no problem neither with slideshow nor with menu. When combined, they work fine upon first load. However when loaded many times, the time interval is not perfect and works with unequal irratic load pattern. Here is my code in home.php

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

and in 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>

If you need details, let me know.

Problem They work perfect individually. When I click home on menubar several times, the fade in time is not constant. some images load faster, others slower.

Answer 1

The reason for your delayed animation execution is probably the jQuery animation queue.

New animations like your fadeOut are queued and wait for previous animations on the same element to finish.

To cancel the current queue you might use jQuery.stop() stop - jQuery API

Description: Stop the currently-running animation on the matched elements.

So in your case this might look like this:

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

Or you disable queuing for this animation fadeOut - jQuery API

A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.

$('.fadein :first-child').fadeOut({ queue : false })

---

Edit

For every time you click your code starts a new setInterval which will also add animations to the queue so maybe clearing the intervall will help:

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);