加载其他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

回答

相关问题