进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf

SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9

原理:由于H5页面中大多都是图片占空间,所以可以给img加一个onload事件,让每一张图片去处理的时候就触发一个函数去处理。

js代码:

  1. $(function () {
  2. var img = $('img');
  3. var lenght = img.length;
  4. var cur = 0;
  5. var vader = $('.vader');
  6. var progbar = $('.wrap');
  7. var prog,progPrecent;
  8. img.each(function (i) {
  9. img[i].onload = function () {
  10. cur++;
  11. prog = cur / lenght * 100;
  12. progPrecent = prog.toFixed(1) + '%';
  13. vader.width(progPrecent);
  14. vader.text(progPrecent);
  15. if (prog >= 100) {
  16. progbar.hide();
  17. }
  18. };
  19. });
  20. });

注意点:这段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. cl_gui_cfw=>dispatch

    将已经触发的EVENT发送给他们各自的EVENT HANDLER,以便让这些事件得到响应. 根据返回值可以判断是否发送成功. CALL METHOD cl_gui_cfw=>dispatch   ...

  2. [ javascript canvas toDataURL() clip() ] javascript canvas toDataURL() clip() 属性及方法演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  3. Cornerstone无法上传静态库文件(.a文件)

    在用Cornerstone同步文件时出现一个错误 检查后发现是缺少了一个文件 查询了网上的资料后发现是Cornerstone自动忽略了.a文件,所以上传到svn服务器时.a文件不会跟随工程一起传上去, ...

  4. CoreAnimation-06-CAKeyframeAnimation

    概述 简介 CAKeyframeAnimation又称关键帧动画 CAKeyframeAnimation是抽象类CAPropertyAnimation的子类,可以直接使用 通过values与path两 ...

  5. IOS中文版资源库

    Swift 语言写成的项目会被标记为  ★ ,AppleWatch 的项目则会被标记为 ▲. [转自]https://github.com/jobbole/awesome-ios-cn#librari ...

  6. android 进程/线程管理(四)----消息机制的思考(自定义消息机制)

    关于android消息机制 已经写了3篇文章了,想要结束这个系列,总觉得少了点什么? 于是我就在想,android为什么要这个设计消息机制,使用消息机制是现在操作系统基本都会有的特点. 可是andro ...

  7. tomcat下部署润乾报表

    因为项目需要,需要在项目中配置润乾报表,之前一直是用的jboss服务器,此处调整为tomcat时出错,然后各种找错,找答案,最后终于好了,然后总结一下. 首先在apache-tomcat-6.0.43 ...

  8. 人机交互—对win10自带输入法的评价

    在我的电脑换成win10系统后我就用他自带的输入法,它可以中英文切换,用起来很方便,就用了它,就没有下载别的输入法. 用户界面:这个输入法的界面非常简单,没有像搜狗,百度之类的皮肤一说,看起来很简单, ...

  9. SQL 相关

    SET STATISTICS TIME ON 记录查询的相关数据 生成随机Guid SELECT NewID() 按照某一列排序并生成序号 select Row_Number() OVER (ORDE ...

  10. C# 日志框架的添加

    .NET中 记录日志的比较好的主要是Log4Net和Enterprise Library的Logging 复杂一点的还可以实现自动化Log日志 教程 首先是第二种方式 1.需要添加以下几个DLL  下 ...