JavaScript中如何使用AJAX加载单张图片展示进度

小编给大家分享一下JavaScript中如何使用AJAX加载单张图片展示进度,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、雅安服务器托管、营销软件、网站建设、吉利网站维护、网站推广。

用手机上网,经常看到加载进度条,尤其是加载图片的。

做过多张图片的加载进度,但是对于单张图片,特别是图片比较大的时候,需要进度条告诉用户加载进度,且可以提高用户体验。

传统的加载肯定不行,需要用到 AJAX 加载,AJAX 加载有个专门的进度事件  progress。

具体demo 如下。实现目标:

加载某图片,且显示加载百分比进度;加载完毕后,就展示该图片。

HTML 结构:


    0%

    内容加载中。。。

JavaScript:

let box = document.getElementById("box");
let pro = document.getElementById("pro");
let req = new XMLHttpRequest();
req.open("get","images/1.png" , true);
req.responseType = "blob";   // 加载二进制数据
req.send();

req.addEventListener("progress",function(oEvent){
    if (oEvent.lengthComputable) {
        var percentComplete = oEvent.loaded / oEvent.total * 100;
        pro.innerHTML = percentComplete + "%" ;
    } else {
        // 总大小未知时不能计算进程信息
    }
});
// 加载完毕
req.addEventListener("load",function(oEvent){
    let blob = req.response;    //  不是 responseText
    pro.innerHTML = "图片加载完毕";
    box.innerHTML = ``;
});

这里需要说明的是:

req.responseType = "blob";

设置请求数据类型为 blob 类型。Binary large Object,就是较大的二进制对象,可以用来加载非文本数据。此demo 加载的是一张图片。

因此,在接受返回数据的时候,不是 reponseText 。

window.URL.createObjectURL(blob)   会基于 blob 对象生成对象的URL路径。这样,就可以在浏览器中看到 blob 所代表的资源(图片,视频,音频等)

以上是“JavaScript中如何使用AJAX加载单张图片展示进度”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章标题:JavaScript中如何使用AJAX加载单张图片展示进度
转载源于:http://scyanting.com/article/piiicp.html