加載其他Div後淡入Div

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

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

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

來源

2012-03-27 Connor

你不能這樣做直接上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/

來源

2012-03-27 20:27:30

這不行，但我可能會做錯事。 – Connor 2012-03-27 20:31:36

它適用於我：http://jsfiddle.net/BPeG2/ – 2012-03-27 20:36:46

@Connor - 你必須把所有這些放在'$（document）.ready（）'中。我將它添加到我的答案中。 – 2012-03-27 20:39:44

你不能等待直接連接到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'); 
    } 
});

來源

2012-03-27 20:24:21 fcalderan

沒有運氣......我需要把圖像源放在哪裏？ – Connor 2012-03-27 20:34:05

.css（background-image）也返回url（...）。嘗試將url寫入圖片 – fcalderan 2012-03-27 20:36:17

試試這個：

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

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

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

來源

2012-03-27 20:49:20

加載其他Div後淡入Div

回答

相關問題