javascript - 如何在加载背景时加载动画

Question

我想做的是在渲染背景图像后向元素添加一个类。

代码看起来像这样:

#banner {
  background-image: url('/img/bg-banner.webp');
}

#banner-title {
  line-height: 1;
  font-family: 'Oswald';
  font-weight: bold;
  text-align: right;
}

#banner-title.start {
  animation-name: fade-in-title;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.33, 0.99, 0.76, 1);
  animation-delay: 1s;
}

<div id="banner">
  <p id="banner-title">Some text</p>
</div>

所以我的问题是，一旦#banner 的背景图像完成加载，我如何将“开始”类添加到#banner-title？

附注在#banner 上加载不起作用

Answer 1

使用 document.addEventListener 见下文...

<script>    
document.addEventListener('DOMContentLoaded', function backgroundLoaded() {
        //do whatever you want
    });
</script>