加载图像后启动 javascript 动画答案

【问题标题】：Start javascript animation after an image has loaded加载图像后启动 javascript 动画
【发布时间】：2014-08-18 08:12:30
【问题描述】：

我正在寻找一种在加载背景图像后启动文本动画的方法。具体来说，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>

感谢您的帮助！

【问题讨论】：

我会试试<body onload="function() { new WOW().init(); }">

标签： javascript image animation

【解决方案1】：

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

你喜欢这样。

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

【讨论】：

【解决方案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
}

【讨论】：