gpt4 book ai didi

javascript - 如何在网页上创建 Assets 加载动画

转载 作者:太空宇宙 更新时间:2023-11-04 13:29:32 25 4
gpt4 key购买 nike

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

我的网页有很多外部 Assets (cdn、css、js、字体、图像),我想显示浏览器当前正在下载的 Assets 的名称以及一个进度条,指示总数没有下载页面中存在的 Assets 。

如何使用下面的代码将无济于事,因为只有在页面完全下载后才会触发该事件。

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

最佳答案

最后我想出了一个几乎可以解决问题的方法。
在您正在加载的 Assets 中写入一个 onload 属性并调用一个 javascript 方法。在 javascript 方法中,我们可以显示当前正在加载的 Assets (带有动画)。
下面我从 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 文件、字体等时打印正在加载的内容。

关于javascript - 如何在网页上创建 Assets 加载动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36302780/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com