预加载动画,移动端常用的加载前的百分比动画
1 <script> 2 function loading() { 3 4 function Load() {} 5 6 Load.prototype.loadImgs = function(urls, callback) { 7 this.urls = urls; 8 this.imgNumbers = urls.length; 9 this.loadImgNumbers = 0; 10 var that = this; 11 for(var i = 0; i < urls.length; i++) { 12 var obj = new Image(); 13 obj.src = urls[i]; 14 obj.onload = function() { 15 that.loadImgNumbers++; 16 callback(parseInt((that.loadImgNumbers / that.imgNumbers) * 100)); 17 } 18 } 19 }; 20 21 var loader = new Load(); 22 23 loader.loadImgs([ 24 // 将所有需要加载的图片地址写于此处 25 "img/about1.jpg", 26 "img/about2.jpg", 27 ], function(percent) { 28 // 假设显示百分比的元素为 $(".percent") 29 $(".percent").text(percent + '%'); 30 31 // 加载结束后,隐藏相应的 loading 或遮罩 32 if(percent == 100) { 33 $(".mask").css('display', 'none'); 34 } 35 }); 36 } 37 // 执行 loading 方法 38 loading(); 39 </script>
移动端的案例等经常有加载前有一个百分比的进度条的显示,这种方法便可以实现,并且同时将图片做了预加载。
浩楠哥