加载其他Div后淡入Div
问题描述:
加载空div(在空div中有一个大背景图像)后,我试图在菜单栏中淡入淡出。该图像需要一两秒钟才能加载,所以我需要在加载图像(div)后淡入菜单。加载其他Div后淡入Div
这里是我的jQuery:(文档。就绪并没有提供正确的效果)
$(.top-bg).ready(function() {
$(".top-bar").fadeIn(1000);
});
答
你不能这样做直接上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/
答
你不能等待直接连接到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');
}
});
答
试试这个:
$(document).ready(function($) {
var tmp = $('<img src="relative_path_to_image" />');
tmp.load(function() {
$(".top-bar").fadeIn(1000);
tmp.remove();
});
});
这不行,但我可能会做错事。 – 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