Flicker on jQuery fadeIn due to caching

Question

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!

check this [FIDDLE](http://jsfiddle.net/alexdickson/3DfGP/) – Sender Oct 01 '12 at 05:35 — Sender, Oct 01 '12 at 05:35

score 1 · Accepted Answer · answered Oct 01 '12 at 05:30

1

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.

answered Oct 01 '12 at 05:30

Sidharth Mudgal

4,234
19
25

Good call on the – David Jones Oct 01 '12 at 05:35

score 1 · Answer 2 · answered Oct 01 '12 at 05:45

1

try this FIDDLE

$('body').waitForImages(

function() {
    $('body').append('<p>Images loaded.</p>');
}, function(loaded, total) {
    $(this).css({
        border: '1px solid #ccc'
    });
    $('span').html(parseInt(loaded / total * 100) + '% loaded.');
});

answered Oct 01 '12 at 05:45

Sender

6,660
12
47
66

You may want to mention that this requires a plugin. – alex Oct 31 '12 at 02:18

Flicker on jQuery fadeIn due to caching

2 Answers2