网站上的“落后”魔兽动画答案

【问题标题】："Lagging" WoW animation on website网站上的“落后”魔兽动画
【发布时间】：2015-11-28 00:59:47
【问题描述】：

我用 wow.js/animate.css 制作了一个简单的网站，在我使用 wow.js 的页面上，动画滞后并且比我预期的要晚一点开始。如果您检查此page，则所有内容都可见约 0.5 秒，之后动画开始。这很烦人，我该如何解决？

我尝试将内容默认设置为不可见，并且在页面完全加载后（document.ready），我将类更改为可见并将“哇”类添加到所需的内容中。

有趣的是，如果我使用例如fadeIn/Out等代替bounceIn，没有问题。

我应该改变什么来停止页面上哇动画的“滞后”？

【问题讨论】：

本网站的用户通常不会对实时网站进行故障排除。代码应在问题正文中提供，强烈推荐minimal reproducible example。

标签： javascript html animate.css wow.js

【解决方案1】：

您可以考虑简单地向文档添加加载动画，而不是破解现有脚本...

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset='UTF-8'>

        <title>Simple Loader</title>

        <style>
            /* This only works with JavaScript, 
               if it's not present, don't show loader */
            .no-js #loader { display: none;  }
            .js #loader { display: block; position: absolute; left: 100px; top: 0; }
        </style>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

        <script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>

        <script>
            // Wait for window load
            $(window).load(function() {
                // Animate loader off screen
                $("#loader").animate({
                    top: -200
                }, 1500);
            });
        </script>   
    </head>
    <body>
        <img src="download.png" id="loader">
        <img src="//farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
    </body>
</html>`

来源：https://css-tricks.com/snippets/jquery/display-loading-graphic-until-page-fully-loaded/

【讨论】：