閃爍jQuery的淡入由於緩存

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支持deteccted情況裏面

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