给H5页面添加百分比的进度条,精确度高
进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf
SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9
原理:由于H5页面中大多都是图片占空间,所以可以给img加一个onload事件,让每一张图片去处理的时候就触发一个函数去处理。
js代码:
$(function () {
            var img = $('img');
            var lenght = img.length;
            var cur = 0;
            var vader = $('.vader');
            var progbar = $('.wrap');
            var prog,progPrecent;
            img.each(function (i) {
                img[i].onload = function () {
                    cur++;
                    prog = cur / lenght * 100;
                    progPrecent = prog.toFixed(1) + '%';
                    vader.width(progPrecent);
                    vader.text(progPrecent);
                    if (prog >= 100) {
                        progbar.hide();
                    }
                };
            });
        });
注意点:这段js代码要放在head中,不然导致有的小图片执行到底下的js时之前已经加载完了。
给H5页面添加百分比的进度条,精确度高的更多相关文章
- 简单实用的纯CSS百分比圆形进度条插件
		percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ... 
- 【原生JS插件】LoadingBar页面顶部加载进度条
		先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ... 
- canvas绘制百分比圆环进度条
		开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ... 
- 【jQuery】页面顶部显示的进度条效果
		<!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ... 
- h5页面添加背景音乐
		[需求]h5页面添加背景音乐,支持微信.QQ.各种APP. [实现思路]1.通过audio标签,设置自动播放,是一种方法,但是此方法只适合微信.QQ,并不兼容我司的APP,需要主动触发下播放事件. 2 ... 
- h5实现手机端等级进度条
		h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ... 
- Android 自定义view --圆形百分比(进度条)
		转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595 注:本文由于是在学习过程中写的,存在大量问题(overdraw onDr ... 
- H5 可堆叠的圆环进度条,支持任意数量子进度条
		by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ... 
- C#带百分比的进度条
		功能需求: 如果程序中会执行一个耗时的计算过程,我想在用户点击按钮后,弹出一个进度条窗口,显示正在执行的进度(最好能带有百分比),执行完成后,进度条窗口关闭,回到主程序窗口. 在关闭子窗口之前父窗体不 ... 
随机推荐
- 使用SWFUpload无刷新上传图片
			使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET ... 
- Installing FIM 2010 R2 SP1 Portal on SharePoint Foundation 2013
			http://www.fimspecialist.com/fim-portal/installing-fim-2010-r2-sp1-portal-on-sharepoint-foundation-2 ... 
- Force.com微信企业号开发系列(一) - 启用二次验证
			微信于9月份推出企业号后引起了业界不小的反响,许多企业都在思索企业号将如何影响企业的运营,从本文开始,我将详细阐述微信企业号开发的相关知识,而本文将着重介绍如何实现更高安全机制的二次验证. 申请企业体 ... 
- iOS Block(一)
			Block使用总结: 1.格式: ReturnType (^ BlockName)(参数…); //例: int (^ BFunc) (int a, int b); 2.block赋值: block名 ... 
- UIScrollView常见属性
			什么是UIScrollView •设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限 • •当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容 • •普通的UIV ... 
- win+Nginx+php+mysql 环境配置
			1.准备工作 (1)PHP 版本5.6.17 下载地址 PHP官网 (2)Nginx 版本1.8.0 下载地址 Nginx官网 (3)MySQL 版本5.7.10 MySQL官网 2.php的安 ... 
- Effective Java 74 Implement Serializable judiciously
			Disadvantage of Serializable A major cost of implementing Serializable is that it decreases the flex ... 
- zobrist hashing
			Zobrist 哈希是一种专门针对棋类游戏而提出来的编码方式,以其发明者 Albert L.Zobrist 的名字命名.Zobrist 哈希通过一种特殊的置换表,也就是对棋盘上每一位置的各个可能状态赋 ... 
- 关于Redis持久化
			Redis有两种持久化的方式:快照(RDB文件)和追加式文件(AOF文件) RDB持久化方式是在一个特定的间隔保存某个时间点的一个数据快照. AOF(Append only file)持久化方式则会记 ... 
- javascript特效实现(4)——当前时间和倒计时效果
			这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ... 
