由于缓存，jQuery fadeIn 闪烁

Question

我有这个：

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

当用户第一次访问该站点时，这非常有效。然而，在刷新时，由于缓存有很多闪烁。我尝试将$('#div').hide(); 移动到整个文档的几个不同位置，但结果是相同的。我也尝试过 $(window).load() 而不是 $(document).load() 但它没有帮助。当然，如果我在 CSS 中设置了display: none，那么就不会出现闪烁，但这意味着该站点对于非 JavaScript 用户来说是损坏的。我也尝试过通过 JavaScript 设置 CSS（即 $(#div).css({'display':'none'}); 但这不起作用。一定有办法！

Answer 1

您需要为图像设置display: none。我觉得这是唯一的出路。关于网站被其他用户破坏的问题，请在<noscript> 标记内放置指向样式表的链接，如果没有检测到 JS 支持，则可以纠正这种情况。

Answer 2

试试这个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.');
});