加載其他Div後淡入Div

Question

加載空div（在空div中有一個大背景圖像）後，我試圖在菜單欄中淡入淡出。該圖像需要一兩秒鐘才能加載，所以我需要在加載圖像（div）後淡入菜單。

這裏是我的jQuery：（文檔。就緒並沒有提供正確的效果）

$(.top-bg).ready(function() { 
    $(".top-bar").fadeIn(1000); 
}); 

Answer 1

你不能這樣做直接上div。

取而代之的是，創建一個內存中的圖像元素，並將其源設置爲背景圖像的源;
那麼你可以將你的函數的img Load事件：

$(document).ready(function($) { 
    var img = new Image(); 
    img.src = $('.top-bg').css('background-image').replace(/url\(|\)/g, ''); 

    img.onload = function(){ 
     $(".top-bar").fadeIn(1000); 
    }; 
}); 

這裏的小提琴：http://jsfiddle.net/BPeG2/

Answer 2

你不能等待直接連接到div load事件：你應該改爲加載圖像在domready事件，然後淡入div本身。同時認爲，你應該檢查，如果圖像是complete狀態（如果它已經緩存）

嘗試像

$(function() { // on dom ready event 

    var div = $(".top-bar"), 
     src = "url-to-your-image", 
     tmp = $('<img />'); 

    tmp.one('load', function() { div.fadeIn(1000) }) /* one: it need to be 
                 executed one time only */ 
     .attr('src', src); 

    if (tmp.get(0).complete) { 
     tmp.trigger('load'); 
    } 
}); 

Answer 3

試試這個：

$(document).ready(function($) { 

    var tmp = $('<img src="relative_path_to_image" />'); 

    tmp.load(function() { 
     $(".top-bar").fadeIn(1000); 
     tmp.remove(); 
    }); 
});