Javascript - Browser skips back to top of page on image change

I have som开发者_StackOverflow社区e simple code to replace an image src. It is working correctly but everytime the image is updated, the browser skips right back to the top of the page.

I have several image tags in my page. All of which hidden, except for the first one. The script just iterates through them and uses the src attribute to update the first image.

Here is the code I am using:

var j = jQuery.noConflict();  
var count = 1;
var img;

function update_main_image()
{   
    count++;   

    if (j('#main_image_picture_'+count).length > 0)
    {   
        img = j('#main_image_picture_'+count).attr('src');
    }
    else
    {   
        count = 1;   
        img = j('#main_image_picture_'+count).attr('src');   
    }    

   j(".main_image_picture_auto").fadeOut(1500, function() { 
       j(this).fadeIn(); 
       j(this).attr("src", img);   
    });       
}


j(document).ready(function()
{
    setInterval(update_main_image, 6000);    
});

Any ideas what might be causing it? Any advice appreciated.

Thanks.

Try to add DIV around your IMG.main_image_picture_auto with width and height style properties setted to maximum posible image size, for example:

<div style='width:400px; height:400px; border: 0px; background: transparent; '>
  <img class='main_image_picture_auto' src=''/>
</div>
<!-- Where width:400px and height:400px is maximum allowed image size -->

And I think, that is better to use setTimeout instead of setInterval

function update_main_image() {   
    // ....
    setTimeout(update_main_image, 6000);    
}
j(document).ready(function() {
    setTimeout(update_main_image, 6000);    
});

http://jsfiddle.net/UBEWS/