預先載入動畫，移動端常用的載入前的百分比動畫

標籤：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>

 

預先載入動畫，移動端常用的載入前的百分比動畫