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

由于缓存，jQuery fadeIn闪烁

2 个答案: