JS教程之实现加载图片时百分比进度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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教程之实现加载图片时百分比进度的主要内容,如果未能解决你的问题,请参考以下文章

jquery ajax交互 进度条显示

js 代码实现视频进度条点到哪个位置就播放那个位置的视频。进度条是用css样式另做的。

unity 3d 中一步加载时 进度条怎么 实现啊??要javascrip版的

JS之滚动条效果

Android文件下载之进度检测

怎样用div实现带百分百环形进度条