预加载动画,移动端常用的加载前的百分比动画
Posted 莫笑我胡为
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了预加载动画,移动端常用的加载前的百分比动画相关的知识,希望对你有一定的参考价值。
<script> function loading() { function Load() {} Load.prototype.loadImgs = function(urls, callback) { this.urls = urls; this.imgNumbers = urls.length; this.loadImgNumbers = 0; var that = this; for(var i = 0; i < urls.length; i++) { var obj = new Image(); obj.src = urls[i]; obj.onload = function() { that.loadImgNumbers++; callback(parseInt((that.loadImgNumbers / that.imgNumbers) * 100)); } } }; var loader = new Load(); loader.loadImgs([ // 将所有需要加载的图片地址写于此处 "img/about1.jpg", "img/about2.jpg", ], function(percent) { // 假设显示百分比的元素为 $(".percent") $(".percent").text(percent + ‘%‘); // 加载结束后,隐藏相应的 loading 或遮罩 if(percent == 100) { $(".mask").css(‘display‘, ‘none‘); } }); } // 执行 loading 方法 loading(); </script>
以上是关于预加载动画,移动端常用的加载前的百分比动画的主要内容,如果未能解决你的问题,请参考以下文章