进度条样式地址: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页面添加百分比的进度条,精确度高的更多相关文章

  1. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  2. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

  3. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  4. 【jQuery】页面顶部显示的进度条效果

    <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...

  5. h5页面添加背景音乐

    [需求]h5页面添加背景音乐,支持微信.QQ.各种APP. [实现思路]1.通过audio标签,设置自动播放,是一种方法,但是此方法只适合微信.QQ,并不兼容我司的APP,需要主动触发下播放事件. 2 ...

  6. h5实现手机端等级进度条

    h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ...

  7. Android 自定义view --圆形百分比(进度条)

    转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595 注:本文由于是在学习过程中写的,存在大量问题(overdraw onDr ...

  8. H5 可堆叠的圆环进度条,支持任意数量子进度条

    by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...

  9. C#带百分比的进度条

    功能需求: 如果程序中会执行一个耗时的计算过程,我想在用户点击按钮后,弹出一个进度条窗口,显示正在执行的进度(最好能带有百分比),执行完成后,进度条窗口关闭,回到主程序窗口. 在关闭子窗口之前父窗体不 ...

随机推荐

  1. SharePoint 2013 使用PowerShell创建State Service

    今天,搞SPD配置的sp2010wf迁移到sp2013环境上去,发布解决方案都很正常,给列表添加wf的时候报错“该表单无法显示,可能是由于 Microsoft SharePoint Server St ...

  2. GCD中的dispatch_set_target_queue的用法及作用

    (一),使用dispatch_set_target_queue更改Dispatch Queue的执行优先级 dispatch_queue_create函数生成的DisPatch Queue不管是Ser ...

  3. Android之 左右滑动菜单

    近来学习了极客学院有关于界面左右滑动的视频,就在这里写个博客,巩固一下知识点,以免忘了. 这里主要介绍界面是如何左右滑动的: 1.首先我们应该设置好将要滑动的三个界面,即leftMenu.middle ...

  4. 捡火柴的Nova君(n个线段相交问题)

    题目来源:https://biancheng.love/contest-ng/index.html#/41/problems 捡火柴的Nova君 题目描述 南方没暖气,怕冷的的宝宝们只能用火柴取暖.然 ...

  5. javascript 全局变量 局部变量 var 与不加var的区别

      一.外部的为全局,内部的为局部变量.   二.加var为局部变量(在方法内),不加var为全局变量(当方法内有一次使用后) <script type="text/javascrip ...

  6. dig与dns基本理论——解析和缓存

    DNS(Domain Name System,域名系统)也许是我们在网络中最常用到的服务,它把容易记住的域名,如 www.google.com 翻译成人类不易记住的IP地址,如 173.194.127 ...

  7. 换新 iPhone 前要做的 9 件事

    iPhone 6 以及 iPhone 6 Plus 终于在众人的期盼下发布了,是不是很多朋友都跃跃欲试,想入手新的 iPhone 呢?若你手中持有旧款 iPhone 的话,其实更换成新机后,还有不少事 ...

  8. Linux下使用iostat 监视I/O状态

    我们可以使用 sar(1), pidstat(1), mpstat(1), vmstat(8) 来监控 一.安装 yum install sysstat 二.参数解释 FILES /proc/stat ...

  9. proxool详细配置

    proxool详细配置 博客分类: Java 配置管理SQLServletprototypeXML  proxool一个数据库连接池框架,提供了对你选择的其它类型的驱动程序的连接池封装.可以非常简单的 ...

  10. Gulp使用入门操作十一步压缩JS

    前提需要安装nodejs 一. 全局安装Gulp npm install -g gulp 二.新建一个 gulpfile.js 文件 chapter2└── gulpfile.js 三.在 gulpf ...