JS教程之实现加载图片时百分比进度
思路:
思路其实很简单,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教程之实现加载图片时百分比进度的更多相关文章
- Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果
Android Glide加载图片时转换为圆形.圆角.毛玻璃等图片效果 附录1简单介绍了Android开源的图片加载框架.在实际的开发中,虽然Glide解决了快速加载图片的问题,但还有一个问题悬 ...
- WebView之加载网页时增加进度提示
上一节讲了一些webview的基本使用以及在记载网页时如何屏蔽掉第三方浏览器,使我们自己开发的程序成为一个微型浏览器.那么这一节将一下在webView加载网页的过程中如何加上进度提示.效果图如下: 主 ...
- js处理img标签加载图片失败,显示默认图片
1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...
- Android的ListView异步加载图片时,错位、重复、闪烁问题的分析及解决方法
Android ListView异步加载图片错位.重复.闪烁分析以及解决方案,具体问题分析以及解决方案请看下文. 我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图 ...
- 微信小程序 加载图片时,先拉长,再恢复正常
今天在写小程序,发现小程序的图片image如过mode设置为widthFix的话, 加载图片会被先拉伸,后恢复正常 我的处理方法是,给他一个初始的height值,或者就直接 height:auto
- 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题
因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...
- 解决android加载图片时内存溢出问题
尽量不要使用setImageBitmap或setImageResource或BitmapFactory.decodeResource来设置一张大图,因为这些函数在完成decode后,最终都是通过jav ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- Android 滚动RecyclerView加载图片时的流畅度优化
实现:使用onScrollStateChanged回调检测滚动状态,并在RecyclerViewAdapter内部设置类似isScrolling的状态值来控制网络图片的加载. 下面是代码举例: // ...
随机推荐
- gym101201J Shopping 二分+RMQ+数学性质
题目传送门 题目大意: 给出n个商品的价格,排成一列,q次查询,每次查询如果你有x的钱,从l格子走到r格子,每种商品有无数个,能买就买,最后还会剩多少钱. 思路: 每一次买都要找离自己最近的且买的起的 ...
- Q859 亲密字符串
给定两个由小写字母构成的字符串 A 和 B ,只要我们可以通过交换 A 中的两个字母得到与 B 相等的结果,就返回 true :否则返回 false . 示例 1: 输入: A = "ab& ...
- linux 登陆失败处理
1.备份要操作的两个配置文件 cp /etc/pam.d/sshd /etc/pam.d/sshd.bak cp /etc/pam.d/login /etc/pam.d/login.bak 2.检查是 ...
- c语言实现栈的增删查减
#include"stdio.h"#include"stdlib.h"#define STACK_SIZE 100#define STACKINCREMENT ...
- Eclipse快捷键--备忘
[Ct rl+T] 搜索当前接口的实现类 1. [ALT +/] 此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ ...
- Open Closed Principle(OCP)开闭原则
面向对象的最基本原则 Software entites like classes,modules and functions should be open for extension but cloa ...
- 015-GenericEncodingFilter模板【解决全局乱码】
package ${enclosing_package}; import java.io.IOException; import java.io.UnsupportedEncodingExceptio ...
- HDU 4171 Paper Route
Problem Description As a poor, tuition-ridden student, you've decided to take up a part time job as ...
- 6个Unity 开源项目分享!
http://gad.qq.com/article/detail/38279?sessionUserType=BFT.PARAMS.249034.TASKID&ADUIN=991655778& ...
- elasticSearch请求流程图