Question

我正在使用以下代码淡入图片：

<script>
$(window).load(function(){
    $('.slides_control img').css('display', "none');
    $('.slides_control img').fadeIn(800);
});
</script>

但是，无论何时我使用我的链接或浏览器的后退/前进按钮向前/向前浏览，我都会有一个闪烁。这是随机的。在初始加载时它永远不会发生。

那么，我需要设定一个时间吗？防止缓存..？或者，有更好的方法..？

我还在我的css文件中隐藏了.slides_control img。

Answer 1

使用：

$(window).load(function(){
    var $p = $('<p><a href="#">Refresh</a></p>').appendTo(document.body);
    $p.find('a').click(function(){
        window.location.reload();
        return false;
    });
    $('.slides_control img').css('display', "none");
    $('.slides_control img').fadeIn(800);
});

http://jsfiddle.net/fhF5E/

连续几次单击“刷新”时会闪烁。

使用：

.slides_control img {
    display: none;
}

$(window).load(function(){
    var $p = $('<p><a href="#">Refresh</a></p>').appendTo(document.body);
    $p.find('a').click(function(){
        window.location.reload();
        return false;
    });
    $('.slides_control img').fadeIn(800);
});

http://jsfiddle.net/fhF5E/1/

我无法让它闪烁一次。

即便如此也不会闪烁：

<div class="slides_control">
    <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG"/>
</div>
<script>$('.slides_control img').hide();</script>

$(window).load(function(){
    var $p = $('<p><a href="#">Refresh</a></p>').appendTo(document.body);
    $p.find('a').click(function(){
        window.location.reload();
        return false;
    });
    $('.slides_control img').fadeIn(800);
});

http://jsfiddle.net/fhF5E/3/

修改

在查看演示该问题的实际页面后，发现display: none正在应用于img，以便在页面加载时，display: none选择器是没有选择任何东西，但之后选择了添加了滑块效果（准备就绪）。

因此...

.slides_control img { display: none; }

需要改为：

.slider img { display: none; }

jQuery .fadeIn由浏览后退/前进引起的闪烁

1 个答案: