Jquery 加载后以背景图像淡入Div

我正在尝试淡入一个

div

，它有一个内嵌的背景图像

---

我已经在页面加载的图像上尝试过了，但是如何在

div中的背景图像上实现这种效果呢
注释中链接的问题的第二个答案提供了一种解决方案，您可以将背景图像加载到图像标签，然后在准备好后将图像注入div。下面是一个类似的示例，但不同的是：

html:

使用此处的实时预览：

希望这对你更好
 您可以使用一个名为jQuery的插件，它可以检测背景图像何时下载

$('selector').waitForImages({
    finished:function(){$(this).slideUp();},
    waitForAll:true
});

你能试试这个吗

HTML

<div id="mg" style="background-image:url(http://lorempixel.com/1920/1920/); display:none; width:1920px; height:1920px;"></div>

JsFiddle


如果不正确地更改URL，您将看到错误消息（例如：背景图像：URL（hERRRttp://lorempixel.com/1920/1920/)）
HTML5动画将加载一个画布上下文，该上下文允许

是动画的CSS演示。
不，这不能回答我的问题。无法检测背景图像何时加载。。所以这里的解决方案是使用另一种加载事件技术嘿，伙计，我需要它在图像加载后淡入。谢谢。@DesignerProgrammer好电话。我更新了我的答案，以便更接近您所要查找的内容。我建议也将背景url放置到div。当您组合模板时，您可能可以这样做，而JS方法需要一些资源：。我还可以在加载后随意删除图像，最小化DOMsize（尽管有人可能会争论删除它们所需的CPU），将答案从
div\id
更新为
\id
。当使用id时，它可以使用
getElementById（）
，当您添加div时，它还必须测试它是否是一个div，并且它不能再使用快速函数：）我刚才说的是div上的背景图像。该代码不关心背景图像。您需要仔细阅读项目文档。@alex set waitForAll:true和背景图像将包括在内。答案已编辑。waitForImages是great@Martijn我不知道，没有特殊原因：）
$('selector').waitForImages({
    finished:function(){$(this).slideUp();},
    waitForAll:true
});

<div id="mg" style="background-image:url(http://lorempixel.com/1920/1920/); display:none; width:1920px; height:1920px;"></div>

var elem   = $('#mg'),
    bgImg  = elem.css('background-image'),
    imgUrl = bgImg.indexOf('"')!=-1 ? 
             bgImg.replace('url("','').replace('")','') : 
             bgImg.replace('url(','').replace(')',''),

     nwImg = new Image();
     nwImg.src = imgUrl;

nwImg.onload = function() {
    elem.fadeIn('fast');
}

nwImg.onerror = function() {
    alert('error');
}