Search code examples
jqueryfadeinflickerwaitforimages

Flicker on jQuery fadeIn due to caching

I have this:

$(document).ready(function() {
    $('#div').hide();
    $('#div').waitForImages(function() {
        $('#div').fadeIn();
    });
})

This works perfectly when the user first comes to the site. On refresh, however, there is lots of flickering due to caching. I've tried moving the $('#div').hide(); to several different places throughout the document but the result is the same. I've also tried $(window).load() instead of $(document).load() but it didn't help. Of course, if I set display: none in the CSS, then there is no flicker, but this means the site is broken for non-JavaScript users. I've also tried setting the CSS via JavaScript (i.e. $(#div).css({'display':'none'}); but this didn't work. There must be a way!

Solution

  • You need to set display: none for the images. I feel that's only way out. Regarding the site being broken for other users, put a link to a stylesheet inside a <noscript> tag that corrects the situation if no JS support is deteccted.