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

Question

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

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

Answer 2

我有一个jQuery插件调用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

CSS资产没有JS回调.

Answer 5

纯 JS 解决方案，将添加预加载器，设置背景图像，然后将其设置为垃圾收集及其事件侦听器：

精简版：

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

preloaderImg.addEventListener('load', (event) => {
    bgElement.style.backgroundImage = `url(${imageUrl})`;
    preloaderImg = null;
});

更长一点的不透明度过渡：

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

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

.bg-lazy {
  height: 100vh;
  width: 100vw;
  transition: opacity 1s ease-out;
}

.bg-loading {
  opacity: 0;
}

<div class="bg-lazy"></div>

Answer 6

这是我制作的一个小插件,可以让你做到这一点,它也适用于多个背景图像和多个元素:

阅读文章:

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-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 7

我找到了一个更适合我的解决方案，它的优点是可用于多个图像（本示例中未说明的情况）。

来自@adeneo 对这个问题的回答：

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

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

您可以通过获取图像 URL 并将其用于带有 onload 处理程序的 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();