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();

  

时间: 2024-08-06 05:25:07

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

js页面加载进度条

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

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

phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas的元素,然后实例化一个 Game 对象就可以了. 复制代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>game</title> <

Unity 显示Loading(加载)进度 对于网上流行的方法进行更正

实际上就是MOMO贴出来的方法其实是有问题的,用过的才知道.至于别的几乎不用找,根本一个抄一个,抄来抄去都是一样,没自己的东西. 用过MOMO那个方法的都应该会发现了,当进度条开始显示的时候,基本上已经加载到80%了,可能也跟Unity版本有关,我的是4.3.4 .但是实际上Unity的工作原理差不多就那样,在Start里面直接开始加载的协程,实际上一开始就会阻塞,导致画面刚刚渲染出来的时候,已经完成了一部分的加载,而很多资源会在一开始就加载了,如果这里的资源太多了,那么就会像我一样,显示很长时

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

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

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

不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-1.8.3.min.js"></scrip

页面加载进度条、图片查看主键增大

进度条图片 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageLoading.aspx.cs" Inherits="PageLoading" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

ajax页面加载进度条插件

下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rstacruz/nprogress/ 二.http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/

addLoadEvent.js 不管在页面加载完毕执行多少个函数,都应付自如

function addLoadEvent(func){    //不管在页面加载完毕执行多少个函数,都应付自如 var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } }

插件二之页面加载进度条pace.js

关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel="stylesheet" href="../themes/pace-theme-center-circle.css" /> <script src="../pace.js"></script> 各样式ie下兼容要求 <!--