我想在我的网页加载时创建某种动画或预加载器。
我的网页有很多外部资产（cdn、css、js、字体、图像），我想显示浏览器当前正在下载的资产的名称以及指示总数的进度条没有下载页面中存在的资产。
如何使用下面的代码将无济于事，因为只有在页面完全下载后才会触发该事件。
$(document).on("pageload",function(){
//animation stops
});
【问题讨论】：
标签： javascript jquery html css
最后我想出了一种几乎可以解决问题的方法。
在要加载的资产中写入 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文件、字体等时打印正在加载的内容。
【讨论】：
您可以使用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()">
希望对你有帮助，
里斯
【讨论】：
I want to display name of the asset the browser is currently downloading and also a progress bar indicating how much of the total no of assets present in the page got downloaded.