javascript - 背景加载后如何加载动画

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

代码看起来像这样：

#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的背景图片加载完成，如何将“ start”类添加到＃banner-title中？

ps。 #banner上的加载不起作用

最佳答案

使用document.addEventListener参见下文...

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

关于javascript - 背景加载后如何加载动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59149766/