我如何检查是否加载了背景图片？

我想在body标签上设置一个背景图像，然后运行一些代码 – 像这样：

$('body').css('background-image','http://picture.de/image.png').load(function() { alert('Background image done loading'); // This doesn't work }); 

我怎样才能确保背景图像是完全加载？

Answer 1

尝试这个：

 $('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() { $(this).remove(); // prevent memory leaks as @benweet suggested $('body').css('background-image', 'url(http://picture.de/image.png)'); }); 

这将在内存中创build新的图像，并使用load事件来检测何时加载src。

Answer 2

我有一个名为waitForImages的jQuery插件 ，可以检测到什么时候下载了背景图片。

 $('body') .css('background-image','url(http://picture.de/image.png)') .waitForImages(function() { alert('Background image done loading'); // This *does* work }, $.noop, true); 

Answer 3

像这样的东西：

 var $div = $('div'), bg = $div.css('background-image'); if (bg) { var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''), $img = $('<img>').attr('src', src).on('load', function() { // do something, maybe: $div.fadeIn(); }); } }); 

Answer 4

CSS资源没有JScallback。

Answer 5

这里有一个小插件可以让你做到这一点，它也适用于多个背景图片和多个元素：

阅读文章：

http://catmull.uk/code-lab/background-image-loaded/

或直接进入插件代码：

http://catmull.uk/downloads/bg-loaded/bg-loaded.js

所以只需包含插件，然后在元素上调用它：

 <script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script> <script type="text/javascript"> $('body').bgLoaded(); </script> 

显然下载插件并将其存储在您自己的托pipe。

默认情况下，一旦加载了背景，它会为每个匹配的元素添加一个额外的“bg-loaded”类，但是您可以通过传递一个不同的函数来轻松改变它：

 <script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script> <script type="text/javascript"> $('body').bgLoaded({ afterLoaded : function() { alert('Background image done loading'); } }); </script> 

这是一个codepen展示它的工作。

http://codepen.io/catmull/pen/Lfcpb

Answer 6

我做了一个纯粹的JavaScript黑客使这成为可能。

 <div class="my_background_image" style="background-image: url(broken-image.jpg)"> <img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';"> </div> 

要么

 onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')"; 

CSS：

 .image_error { display: none; } 

Answer 7

https://github.com/alexanderdickson/waitForImages

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