做东西遇到显示页面百分比的加载进度,不过里面的图片较多,看了别人的代码,才想到可以通过图片的加载显示加载的百分比,做一下笔记:

html:

<span id="percent"></span>

js:

  function perFun(){
var imgs = document.getElementsByTagName("img");
var len = 0;
var percent = document.getElementById("percent");
for(var i=0; i<imgs.length; i++){
(function(i){
imgs[i].onload = function(){
len ++;
percent.innerText = Math.round(len*100/imgs.length);
}
})(i);
}
}
perFun();

  

js 百分比显示页面加载进度的更多相关文章

  1. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  2. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. prelaod场景,用来显示资源加载进度

    phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas ...

  4. js 过多 导致页面加载过慢

    自己的代码检查了很久,才检查 出来 通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊, 一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含 ...

  5. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  6. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  7. 网站顶部显示预加载进度条preload.js

    网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...

  8. js页面加载进度条(这个就比较正式了,改改时间就完事儿)

    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...

  9. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

随机推荐

  1. Xshell的使用以及常用命令

    工具/原料 Xshell 方法/步骤 打开软件,点击新建,在主机哪里写入要访问的ip地址,名称随意 点击文件之后,再点击打开: 就可以看到刚才新建的会话了: 点击连接,就会显示下面的画面,输入用户名, ...

  2. elasticsearch的cross_fields查询

    1.most_fields 这种方式搜索也存在某些问题 它不能使用 operator 或 minimum_should_match 参数来降低次相关结果造成的长尾效应. 2.词 peter 和 smi ...

  3. grep与正则表达式:

    1.grep程序 Linux下有文本处理三剑客 -- grep sed awk grep:文本 行过滤工具 sed: 文本 行编辑器(流编辑器) awk:报告生成器(做文本输出格式化)  grep   ...

  4. [HDU517] 小奇的集合

    题目链接 显然有贪心每次选择最大的两个数来做. 于是暴力地把最大的两个数调整到非负(暴力次数不超过1e5),接下来使用矩阵乘法即可. \[ \begin{pmatrix} B'\\S'\\T' \en ...

  5. FFmpeg4.0笔记:封装ffmpeg的解码功能类CDecode

    Github https://github.com/gongluck/FFmpeg4.0-study/tree/master/Cff CDecode.h /********************** ...

  6. C++练习 | 单链表的创建与输出(结构体格式)

    #include <iostream> #include <stdio.h> using namespace std; #define OK 1 #define ERROR 0 ...

  7. python_0基础开始_day12

    第十二节 一,生成器 生成器的核心:生成器的本质就是迭代器 迭代器是python自带的 生成器是程序员自己写的一种迭代器 在python中有三种方式来创建生成器: 基于函数编写 推导式方式编写 pyt ...

  8. SpringBoot中使用Websocket进行消息推送

    WebsocketConfig.java @Configuration public class WebSocketConfig { @Bean public ServerEndpointExport ...

  9. js日期相关方法

    /** * ===================================== * 日期相关方法 * ===================================== */ ;(fu ...

  10. Linux-1.3目录结构,基础命令

    1.Linux目录结构 2.Linux基础命令(常用) ctrl+alt+T(打开终端) cd 切换文件夹(pwd查看当前目录) cd /home 绝对路径 以根目录开头 cd admin 相对路径 ...