Question

我正在寻找一种在加载背景图片后启动文本动画的方法。具体来说，在div＃image-bg加载了它的背景图像之后，h1元素应该是动画的。我正在使用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>

感谢您的帮助！

Answer 1

您需要检测CSS设置的背景图像是否已完成加载。您可以使用名为waitForImages的插件执行此操作。

你喜欢这样。

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

Answer 2

没有直接通知加载背景图片。

一种解决方法是将其加载到javascript图像对象中，当该图像报告加载了相同的图像时，您将知道您的背景图像也可用。

另一种解决方法是使用页面的window.onload处理程序来了解何时加载所有页面资源。

以下是第一个如何运作：

 var img = new Image();
 img.onload = function() {
     // place code here for when the background image is loaded
 }
 img.src = "url of background image";

第二种选择是这样的：

window.onload = function() {
     // place code here for when the background image is loaded
}

加载图像后启动javascript动画

这是我的html页面的剥离版本：

2 个答案: