由于缓存，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

试试这个小提琴

$('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.');
});