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

p.s。 #banner上的加载不起作用

Answer 1

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

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

Answer 2

如果需要确保在执行某些javascript代码之前已经加载了背景图片，则可以尝试执行此操作（在横幅的之后）：

var img = new Image();
img.onload = function () {
    document.getElementById('banner').classList.add('start');
    // or some other code that requires the image to have been loaded
}
img.src = "/img/bg-banner.webp";

注意：您仍然需要在CSS中声明背景图片：

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

这应该可以解决浏览器延迟加载背景图像的问题。我认为可以合理地假设，如果图像已加载到img变量中，那么它也可以作为横幅的背景图像使用。

我知道这有点hack，但是对我有用。

背景加载后如何加载动画

2 个答案: