Question

我有一些简单的代码来替换图像src。它工作正常，但每次更新图像时，浏览器都会直接跳到页面顶部。

我的页面中有几个图片标签。所有这些都隐藏了，除了第一个。脚本只是迭代它们并使用src属性来更新第一个图像。

以下是我正在使用的代码：

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

任何可能导致它的想法？任何建议表示赞赏。

感谢。

Answer 1

尝试在DIV周围添加IMG.main_image_picture_auto width 和 height 样式属性设置为最大可能图像大小，例如：

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

我认为，最好使用setTimeout代替setInterval

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

http://jsfiddle.net/UBEWS/

Javascript - 浏览器在图像更改时跳回页面顶部

1 个答案: