Question

我想在我的网页加载时创建某种动画或预加载器。

我的网页上有很多外部资源（cdn，css，js，字体，图片），我想显示浏览器当前正在下载的资产名称，还有一个进度条，显示总数中有多少页面中没有任何资产被下载。

如果使用下面的代码无效，因为只有在完全下载页面后才会触发事件。

$(document).on("pageload",function(){
     //animation stops
});

Answer 1

最后，我想出了一种几乎可以解决问题的方法在要加载的资产中写入onload属性并调用javascript方法。在javascript方法中，我们可以显示当前正在加载的资产（使用动画）下面我已经加载了来自CDN链接的javascript，当它加载时，它可以与动画一起打印在页面上。

<body>
  <div id='myDIV' class="loader"> </div>
  <div id='message'>
    <ul id="asset">

    </ul>
    <script onload="myFunction('jquery loaded...')" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script onload="myFunction('angular js loaded...')"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
   <script onload="myFunction('bootstrap js loaded')"type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

JavaScript函数可以是

function myFunction(ele) {
    var node = document.createElement("LI");
    var textnode = document.createTextNode(ele); 
    node.appendChild(textnode);
    document.getElementById("asset").appendChild(node);
}

同样，我们可以在下载图像，css文件，字体等时打印正在加载的内容。

Answer 2

您可以使用Font Awesome图标。

查看他们的spinning icons。

这意味着您可以通过从DOM中删除fa-spin类来停止旋转图标。

例如：
HTML

<i id="loadingIcon" class="fa fa-spinner fa-spin"></i>

JS

$(document).ready(function() {
  $('#loadingIcon').removeClass('fa-spin');
});

此外，要显示正在加载的资源，您可以在HTML中使用onload属性。

<script src="someSource.js" onload="myCallback()">

我希望这有帮助，
里斯

如何在网页上创建资源加载动画

2 个答案: