加载后淡入带有背景图片的 Div 元素

Question

我正在尝试淡入一个内嵌背景图片的

元素。

我已经在页面加载时尝试过对图片进行操作，但是如何在

元素中实现这种效果呢？

- designerNProgrammer

---

https://dev59.com/FW015IYBdhLWcg3w_Aug - Arun P Johny

不，那并没有回答我的问题。 - designerNProgrammer

据我所知，目前没有办法检测背景图像何时加载完成...因此解决方案是利用另一种加载事件技术。 - Arun P Johny

Answer 1

你可以使用一个名为waitForImages的jQuery插件，它可以检测背景图片是否已下载。

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

- Mahmoude Elghandour

---

我在谈论div上的背景图片。 - designerNProgrammer

那段代码不会考虑背景图片。你需要更仔细地阅读项目文档。 - alex

@alex 设置 waitForAll: true，背景图片将被包含。回答已编辑。 - joelmdev

waitForImages很棒。 - Benjamin Intal

Answer 2

在评论中提到的问题的第二个答案，链接在这里，提供了一种解决方案，您可以将背景图像加载到图像标签中，然后当它准备好时将图像注入到div中。 这里是一个类似但有所不同的示例：

html：

<img src="http://www.modernmythmedia.com/wp-content/uploads/2013/04/Iron-Man-wallpaper-2-2032-e1367196003357.jpg" id="dummy" style="display:none;" alt="" />
<div id="pic" style="height:100px;width:100px;display:none;"></div>

jQuery:

$('#dummy').ready(function() {
    $('#pic').css('background-image','url(http://www.modernmythmedia.com/wp-content/uploads/2013/04/Iron-Man-wallpaper-2-2032-e1367196003357.jpg)');
    $('#pic').fadeIn(1000);
});

这里有实时预览: Fiddle.

希望这对你更加友好！

- Blundering Philosopher

---

嘿，伙计，我需要在图像加载后淡入。谢谢。 - designerNProgrammer

@designerNProgrammer 好的，我更新了我的答案，使其更接近您想要的。 - Blundering Philosopher

我建议将背景URL放置在div中。您可能可以在组合模板时完成此操作，而JS方法需要一些资源：http://jsfiddle.net/unUc8/8/。我还决定在加载后删除图像，以最小化DOM大小（尽管有人可能会对删除它们所需的CPU提出异议）。 - Martijn

将答案从 div#id 更新为 #id。使用 id 时，可以使用 getElementById()，当添加 div 时，还必须测试它是否是 div，因此不能再使用快速函数 :) - Martijn

Answer 3

HTML5动画将加载一个画布上下文，允许进行此类操作和更多操作。

这里是动画的CSS演示。

- Kraken

Answer 4

你能试一下吗？

HTML

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

JS

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');
}

JsFiddle

http://jsfiddle.net/EZg36/8/

如果您不正确更改URL，则会看到错误消息（例如：background-image:url(hERRRttp://lorempixel.com/1920/1920/);）

- midstack

---

@Martijn 我不知道，没有特别的原因 :) - midstack