我如何检查是否一个背景图像加载？

Question

我想设置一个背景图像上身体标记，然后运行一些代码 - 这样的：

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

这会在内存中创建新的图像，并使用load事件被加载在src时被检测到。

Answer 2

我有一个名为jQuery plugin时waitForImages背景图片下载，可以检测。

$('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

有没有JS回调CSS资产。

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>

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

默认情况下，一旦后台加载，但你可以很容易地改变，通过传递一个不同的功能像这样增加了额外的“BG-装”类每一个匹配元素：

<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

我已经位于该工作对我来说更好的解决方案，并且具有的是与几个图像（在本例中没有说明的情况下）可使用的优势。

从@ adeneo对this question答案：

如果你有一个背景图像的元素，像这样

<div id="test" style="background-image: url(link/to/image.png)"><div>

您可以通过使用一个onload处理获得图像URL和使用它的图像对象在javascript等待背景负荷

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

Answer 7

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

https://github.com/alexanderdickson/waitForImages

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

Answer 9

纯JS的解决方案，将新增预加载，设置背景图片，然后将其设置为垃圾收集与它一起的事件监听器：

const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector("body");
bgElement.classList.add("loading");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;

preloaderImg.addEventListener('load', (event) => {
  bgElement.classList.remove("loading");
  bgElement.classList.add("loaded");
  bgElement.style.backgroundImage = `url(${imageUrl})`;
  preloaderImg = null;
});

.loading {
  opacity: 0;
  transition: opacity .4s ease-out;
}

.loaded {
  opacity: 1;
}