码迷,mamicode.com
首页 > 移动开发 > 详细

预加载动画,移动端常用的加载前的百分比动画

时间:2017-07-06 13:20:21      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:logs   image   log   prototype   back   显示   预加载   bsp   cal   

<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>

 

预加载动画,移动端常用的加载前的百分比动画

标签:logs   image   log   prototype   back   显示   预加载   bsp   cal   

原文地址:http://www.cnblogs.com/moxiaowohuwei/p/7125619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!