<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>
移动端的案例等经常有加载前有一个百分比的进度条的显示，这种方法便可以实现，并且同时将图片做了预加载。
时间是一个好东西，记录的是爱你的证据
转载于:https://www.cnblogs.com/bore/p/9047286.html
