预加载器完成后如何启动 Bootstrap 动画？答案

【问题标题】：How to start Bootstrap animation after preloader is finished?预加载器完成后如何启动 Bootstrap 动画？
【发布时间】：2015-09-05 04:24:52
【问题描述】：

我在网站启动时使用了一些 css 动画，但我希望它们仅在预加载器之后启动。当我加载页面时，预加载器需要几秒钟才能完成，并且动画无法播放，因为它们已经在加载时播放，由于正在显示预加载器而无法看到。

所以在建议之后，这就是它的样子：

<head>
<html class="full" lang="en">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" >
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">

 <script type="text/javascript" charset="UTF-8">
    $(document).ready(function() {
        $("#logg").addClass("animated rollIn");
    });
</script>
</head>

<body>
<div id="preloader">
<div id="status"> <img src="assets/img/preloader.gif" height="64" width="64" alt=""> </div>
</div>
<div class="coming-soon">
<div class="container">
<div class="row">
  <div class="span12">
     <div class="logo">
    <img id="logg" src="assets/img/logo6.png" alt="logo" style="max-width: 260px; height:auto; display:inline-block;">
</div>

上面的代码没有播放动画，我从here下载了动画

提前致谢！

【问题讨论】：

可能与内联样式有关？它覆盖写入文件或加载在样式标签之间的 css ...
@GCyrillus 感谢您的回复！我试图删除内联样式，但动画仍然没有加载。当我使用 class="animated rollIn" 但不使用脚本时，它会加载 find 。还有其他想法吗？
你没有忘记加载jquery吗？
@GCyrillus 抱歉，我将如何检查？谢谢！
小提示，如果您熟悉chrome dev tools（我想您使用 Chrome 对吗？），您可能已经发现了 javascript 错误。对于 Web 开发人员来说，这是一个非常宝贵的工具，请好好利用它:)

标签： html css animation preload

【解决方案1】：

请改用load 事件。当 所有资源 准备就绪时，会触发 load 事件。另一方面，ready 在 DOM 结构准备就绪时触发，通常这是首先加载的内容。

还要确保您的所有资源都在您的 <head> 元素内，并且您的 <img> 是 inline-block 或 block 元素。

我所说的都是这样的：

<html>
<head>
    <link rel="stylesheet" href="animate.min.css">
    <script type="text/javascript" charset="UTF-8">
        $(document).ready(function() {
            $("#logg").addClass("animated rollIn");
        });
    </script>
</head>
<body>
    <div class="logo">
        <img id="logg" src="assets/img/logo6.png" alt="logo" style="max-width: 260px; height:auto; display:inline-block;">
    </div>
</body>
</html>

编辑

既然 OP 提供了该页面的链接，就很容易发现错误。您正在尝试使用 jQuery 的 $ 别名 before 包括 jQuery 本身。顺序很重要，所以将源代码底部的所有 jQuery 脚本放在 <head> 标记的开头:)

// Put those at the top of your <head>
<script src="assets/js/jquery-1.10.2.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
<script src="assets/js/jquery.countdown.js"></script> 
<script src="assets/js/custom.js"></script>

【讨论】：

感谢您的快速回复！我试过了，但没有动画，我做错了吗？
@coloroid 在这种情况下，它与您的动画有关。我正在对此进行一些研究。但无论如何，加载事件仍然是正确的，好吗？！坚持
当我使用class= "animated rollIn" 时，动画加载正常，但是当我使用脚本时，它不起作用。有什么我需要解决的吗？
@coloroid 现在试一试。你能提供你使用哪个库来制作动画吗？ Bootstrap 不包括此类动画 AFAIK。
我刚刚尝试过，但动画似乎仍然无法播放。我从这里下载了一个动画 css：link