Question

I’m using the following code to fade in images:

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

However, anytime I browse back/forward, with my links, or the browser’s back/forward buttons, I tend to get a flicker. It’s random. On initial load it never happens.

So, do I need to set a time out..? Prevent caching..? Or, is there a better method..?

I have also hidden .slides_control img in my css file.

Answer 1

Using:

$(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/

It does flicker when you click Refresh several times in a row.

Using:

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

I haven’t been able to get it to flicker once.

Even this doesn’t flicker:

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

EDIT

After reviewing the actual page that demonstrated the problem, it was discovered that the display: none was being applied to the img in such a way that on page load, the display: none selector was not selecting anything, but then was selecting after the slider effect was added (on ready).

So…

.slides_control img {
    display: none;
}

Needs to change to:

.slider img {
    display: none;
}