如何检查背景图像是否已载入?

I want to set a background image on the body tag, then run some code - like this:

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

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

How can I make sure the background image is fully loaded?

如何确保背景图像已完全载入?

8 个解决方案

#1

238

try this:

试试这个:

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

this will create new image in memory and use load event to detect when the src is loaded.

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

#2

I have a jQuery plugin called waitForImages that can detect when background images have downloaded.

我有一个叫做waitForImages的jQuery插件，可以检测背景图片何时下载。

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

#3

Something like this:

是这样的:

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

#4

There are no JS callbacks for CSS assets.

CSS资产没有JS回调。

#5

Here is a small plugin I made to allow you to do exactly this, it also works on multiple background images and multiple elements:

这是我做的一个小插件允许你这样做，它同样适用于多个背景图像和多个元素:

Read the article:

读这篇文章:

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

or go straight to the plugin code:

或者直接进入插件代码:

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

So just include the plugin and then call it on the element:

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

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

Obviously download the plugin and store it on your own hosting.

显然，下载插件并将其存储在您自己的主机上。

By default it adds an additional "bg-loaded" class to each matched element once the background is loaded but you can easily change that by passing it a different function like this:

默认情况下，在加载背景后，它会向每个匹配的元素添加一个额外的“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>

Here is a codepen demonstrating it working.

这里有一个代码页演示它的工作。

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

#6

https://github.com/alexanderdickson/waitForImages

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

#7

I did a pure javascript hack to make this possible.

我做了一个纯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;
}

#8

I've located a solution that worked better for me, and which has the advantage of being usable with several images (case not illustrated in this example).

我找到了一个对我来说更好的解决方案，它的优点是可以使用多个图像(本例中没有说明这种情况)。

From @adeneo's answer on this question :

@adeneo对这个问题的回答是:

If you have an element with a background image, like this

如果你有一个有背景图像的元素，像这样
<div id="test" style="background-image: url(link/to/image.png)"><div>
You can wait for the background to load by getting the image URL and using it for an image object in javascript with an onload handler

您可以通过获取图像URL并在javascript中使用onload处理程序对图像对象使用它来等待后台加载。
var src = $('#test').css('background-image');
var url = src.match(/$(.*?)$/)[1].replace(/('|")/g,'');

var img = new Image();
img.onload = function() {
    alert('image loaded');
}
img.src = url;
if (img.complete) img.onload();

#1

238