js 百分比显示页面加载进度
做东西遇到显示页面百分比的加载进度,不过里面的图片较多,看了别人的代码,才想到可以通过图片的加载显示加载的百分比,做一下笔记:
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 百分比显示页面加载进度的更多相关文章
- Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...
- js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- prelaod场景,用来显示资源加载进度
phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas ...
- js 过多 导致页面加载过慢
自己的代码检查了很久,才检查 出来 通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊, 一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含 ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- 网站顶部显示预加载进度条preload.js
网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...
- js页面加载进度条(这个就比较正式了,改改时间就完事儿)
不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...
- jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
随机推荐
- Java利用PushbackReader实现返回对文本中的指定字符串之前的内容
import java.io.FileReader; import java.io.PushbackReader; public class PushbackTest { public static ...
- CVE-2018-2628
哈哈哈,终于等到我复现一个CVE漏洞了. 漏洞描述 Oracle Fusion Middleware(Oracle融合中间件)是美国甲骨文(Oracle)公司的一套面向企业和云环境的业务创新平台.该平 ...
- 菜鸟系列Fabric——Fabric 1.4共识机制(5)
fabric 共识机制 由于fabric是分布式的系统,因此需要共识机制来保障各个节点以相同的顺序状态保存账本,达成一致性. 在当前fabric1.4版本中,存在三种共识机制,分别是solo,kafk ...
- Elasticsearch-如何控制存储和索引文档(_source、_all、返回源文档的某些字段)
Elasticsearch-如何控制存储和索引文档(_source._all) _source:可以在索引中存储文档._all:可以在单个字段上索引所有内容. 1. 存储原有内容的_source _s ...
- [python] 执行 dos 命令
python的os模块 os模块调用CMD命令有两种方式:os.popen(),os.system(). 都是用当前进程来调用. os.system是无法获取返回值的.当运行结束后接着往下面执行程序. ...
- Asteroid Collision
We are given an array asteroids of integers representing asteroids in a row. For each asteroid, the ...
- kafka整理笔记笔记
一.为什么需要消息系统 解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多消息 ...
- 索引及explain 详解
索引的分类: 普通索引:仅加速查询 唯一索引:加速查询 + 列值唯一(可以有null) 主键索引:加速查询 + 列值唯一(不可以有null)+ 表中只有一个 组合索引:多列值组成一个索引,专门用于组合 ...
- C++练习 | 类的继承与派生练习(1)
#include <iostream> #include <cmath> #include <cstring> #include <string> #i ...
- 用git创建仓库关联本地项目,又一直上传不上去
这个不能勾,我这边勾了用VSCODE上传不了