思路:
思路其实很简单,ajax执行时,会生成一个event对象,其中会包含要加载的文件的大小和当前已经加载完成部分的大小,通过这两个值即可计算出百分比

事件介绍
onprogress 当浏览器正在加载媒介数据时触发
onload 在onprogress事件后,加载媒介数据完毕时触发

附图一张:event对象所包含的所有值,其中total为总大小,loaded为已经加载完的大小(图中显示的为加载一张7M的图片时的progress信息)

demo:

<script src="http://file.leeye.net/jquery.js"></script>
<script> var xhr = createXHR();
xhr.onload = function(event){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//alert(xhr.responseText);
}else{
//alert('Request was unsuccessful: '+ xhr.status);
}
} //千锋PHP-PHP培训的实力派
xhr.onprogress = function(event){
var progress = '';
var divStauts = document.getElementById("status");
console.log(event);
if(event.lengthComputable){
progress = ""+Math.round(100*event.loaded/event.total)+"%";
divStauts.innerHTML = "Recevied " + progress + " of " + event.total + "bytes";
}
} function createXHR(){
var xhr = null;
try {
// Firefox, Opera 8.0+, Safari,IE7+
xhr = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xhr = null;
}
}
}
return xhr;
} function upload(){
url = 'http://file.leeye.net/test.jpg'
xhr.open('get', url, true);
xhr.send(null);
$('img').attr('src' , url).show();
} </script>
<button>up</button>
<div id="status"></div>
<img style="display: none;">

JS教程之实现加载图片时百分比进度的更多相关文章

  1. Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果

     Android Glide加载图片时转换为圆形.圆角.毛玻璃等图片效果 附录1简单介绍了Android开源的图片加载框架.在实际的开发中,虽然Glide解决了快速加载图片的问题,但还有一个问题悬 ...

  2. WebView之加载网页时增加进度提示

    上一节讲了一些webview的基本使用以及在记载网页时如何屏蔽掉第三方浏览器,使我们自己开发的程序成为一个微型浏览器.那么这一节将一下在webView加载网页的过程中如何加上进度提示.效果图如下: 主 ...

  3. js处理img标签加载图片失败,显示默认图片

    1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...

  4. Android的ListView异步加载图片时,错位、重复、闪烁问题的分析及解决方法

    Android ListView异步加载图片错位.重复.闪烁分析以及解决方案,具体问题分析以及解决方案请看下文. 我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图 ...

  5. 微信小程序 加载图片时,先拉长,再恢复正常

    今天在写小程序,发现小程序的图片image如过mode设置为widthFix的话, 加载图片会被先拉伸,后恢复正常 我的处理方法是,给他一个初始的height值,或者就直接 height:auto

  6. 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题

    因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...

  7. 解决android加载图片时内存溢出问题

    尽量不要使用setImageBitmap或setImageResource或BitmapFactory.decodeResource来设置一张大图,因为这些函数在完成decode后,最终都是通过jav ...

  8. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

  9. Android 滚动RecyclerView加载图片时的流畅度优化

    实现:使用onScrollStateChanged回调检测滚动状态,并在RecyclerViewAdapter内部设置类似isScrolling的状态值来控制网络图片的加载. 下面是代码举例: // ...

随机推荐

  1. python-继承,父类,子类

    class Spell(object): def __init__(self, incantation, name): self.name = name self.incantation = inca ...

  2. gym101964G Matrix Queries seerc2018g题 数学归纳法+线段树(递归)

    题目传送门 题目大意: 给出2^k大小的白色矩形,q次操作,每次将一行或者一列颜色反转,问总体矩阵的价值,矩阵的价值定义是,如果整个矩阵颜色相同,价值为1,否则就把这个矩阵切成四份,价值为四个小矩阵的 ...

  3. opacity 兼容 ie8

    opacity: 0.6; filter: alpha(opacity=60);

  4. UVALive - 7061 区间DP初步

    题意:杀一只狼i会收到a[i]+b[i当前左边]+b[i当前右边]的攻击,求杀死所有狼的最小代价 #include<iostream> #include<algorithm> ...

  5. Apache Shiro(六)-基于URL配置权限

    数据库 先准备数据库啦. DROP DATABASE IF EXISTS shiro; CREATE DATABASE shiro DEFAULT CHARACTER SET utf8; USE sh ...

  6. n皇后问题--DFS输出棋盘

    N皇后问题 Problem Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.你的任务是,对 ...

  7. mongodb 增查改删

    我们在  MongoDB 之 你得知道MongoDB是个什么鬼 MongoDB - 1  中学习了如果安装部署一个 MongoDB 如果没看到我的金玉良言的话,就重新打开一次客户端和服务端吧 本章我们 ...

  8. (转)shell实现多级菜单脚本编写

    shell实现多级菜单脚本编写 原文:https://www.yuanmas.com/info/2gOwBPvqyb.html 这篇文章主要介绍了Shell实现多级菜单系统安装脚本实例分享,本文脚本用 ...

  9. (转)Linux网络状态工具ss命令使用详解

    Linux网络状态工具ss命令使用详解 原文:http://www.landui.com/help/show-5991.html ss 是 socket statistics 的缩写.顾名思义,ss ...

  10. 两种请求方式URLHttpconnection 和Httpclient提交表单 网络篇(二)

    安卓有两种发送请求的方式:URLHttpconnection 和Httpclient 下面就来讲下这两种方式,这篇是最基础的使用 进阶请看第二篇  先占位 打扫卫生去了T T 快过年了 框架就放网络篇 ...