Question

我在网站启动时使用了一些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下载动画

提前致谢！

Answer 1

改为使用load事件。 所有资源准备就绪时会触发load事件。另一方面，当DOM结构准备就绪时会触发ready，通常这是第一个被加载的东西。

另外，请确保您的所有资源都在<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的$别名，包括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>

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

1 个答案:

修改