jquery - 由于缓存，jQuery fadeIn 闪烁

Question

我有这个：

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

当用户第一次访问该站点时，这非常有效。然而，在刷新时，由于缓存而有很多闪烁。我尝试将其移动$('#div').hide();到整个文档中的几个不同位置，但结果是相同的。我也尝试过$(window).load()，$(document).load()但没有帮助。当然，如果我display: none在 CSS 中设置，则不会出现闪烁，但这意味着该站点对于非 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.');
});