加载 gif 后更改背景图像？答案

【问题标题】：Changing background-image once gif has loaded?加载 gif 后更改背景图像？
【发布时间】：2016-07-26 12:23:52
【问题描述】：

好的，所以基本上我使用 gif 作为背景图像，但是我希望它显示静态图像，直到 gif 完全加载并准备好播放。

阅读了一些类似的主题后，我知道您可以使用 js 定位元素并在加载后更改它们，但是我看到的唯一示例是通过 css 定位 img 标签而不是背景图像。

如果有帮助，这里是一个sn-p

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  width: 100%;
  height: 100%;
  background: #232228 url(../img/bg-center.jpg) top no-repeat; /* Static */
  background: #232228 url(../img/bg-center.gif) top no-repeat; /* Animated */
}

【问题讨论】：

试试这个stackoverflow.com/questions/29742508/…
虽然我没有使用图像标签，我看到一些关于它的带有图像标签的帖子，但找不到任何专门针对背景图像的内容
您应该使用常规图像，以便可以使用 onload 事件。背景图像没有 DOM 事件。
为什么不使用画布，让它显示你的静态图像，直到 gif 准备好？如果要将元素作为背景，只需使用 z-index 将其绘制在背景中即可。

标签： javascript html css image

【解决方案1】：

这个恐怕得用JS了，用图片加载插件看看gif图片有没有加载然后修改bg属性

【讨论】：

嗯知道为什么这不起作用吗？ <script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script> <script> imagesLoaded( '.bgloaded', { background: true }, function(document.body.className+='bgloaded') { console.log('body background image loaded'); }); </script>
你能给我提琴吗？
@IzaakLindsay 看到更新的小提琴，传递 className 是问题
是的，我知道了，我正在尝试添加函数，以便在该图像加载后将 bgloaded 类添加到正文
jsfiddle.net/vf4pcux9/8 在添加类之前它没有等待 gif 加载