jquery预加载显示百分比

Posted newmiracle

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery预加载显示百分比相关的知识,希望对你有一定的参考价值。

jquery预加载显示百分比
<pre>
<img class="bj loadimg" loadimg="/weiqingshu/images/1/bj.jpg"/>
</pre>

<script type="text/javascript" src="/caigeci/js/jquery.imgpreload.min.js"></script>
<pre>
imgNum=0;
var load_img = [];
/*$(‘.loadimg‘).each(function () {
var loadimg=$(this).attr(‘loadimg‘);
load_img.push(loadimg);
})*/
load_img.push( ‘/caigeci/images/answer0.jpg‘ );
load_img.push( ‘/caigeci/images/answer1.jpg‘ );
/*ss*/
jQuery.imgpreload(load_img, {
each: function () {
/*this will be called after each image loaded*/
var status = $(this).data(‘loaded‘) ? ‘success‘ : ‘error‘;
if (status == "success") {
var v = (parseFloat(++imgNum) / load_img.length).toFixed(2);
console.log(Math.round(v * 100) + "<sup>%</sup>");
}
},
all: function() {
console.log(‘全部加载完成‘);
/*$(‘.loadimg‘).each(function () {
var loadimg=$(this).attr(‘loadimg‘);
$(this).attr(‘src‘,loadimg);
})*/
}
});
</pre>

ps:加载的文件个数 /全部文件个数 的百分比就是进度

以上是关于jquery预加载显示百分比的主要内容,如果未能解决你的问题,请参考以下文章

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

资源百分比预加载

JS怎么实现网页加载的进度百分比

jquery ajax交互 进度条显示

使用JavaScript预加载器

js实现图片预加载