gpt4 book ai didi

javascript - 图像加载后启动 JavaScript 动画

转载 作者:行者123 更新时间:2023-11-28 12:28:17 24 4
gpt4 key购买 nike

我正在寻找一种在加载背景图像后启动文本动画的方法。具体来说,h1 元素应该在 div#image-bg 加载其背景图像后进行动画处理。我正在使用wow.js为对象设置动画,开发人员的目的是启动滚动运动。要查看存在问题的完整网站,请访问 abbyaker.com。

这是我的 html 页面的精简版本:

<html>
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div id="container">
<!-- - - - - - - - - - - - - - Intro - - - - - - - - - - - - - -->
<div id="headwrap">
<div id="image-bg"></div>
<div id="intro">
<h1 class="white wow fadeInUp" data-wow-duration="700ms" data-wow-delay="400ms">Hello</h1>
</div>
</div>
</div>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>

感谢您的帮助!

最佳答案

您需要检测CSS设置的背景图片是否已经加载完毕。您可以使用名为 waitForImages 的插件来做到这一点.

你确实喜欢这个。

$('div#image-bg').waitForImages({
waitForAll: true,
finished: function() {
//do animation here.
}
});

关于javascript - 图像加载后启动 JavaScript 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25354498/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com