免费学习推荐：js视频教程
用手机上网，经常看到加载进度条，尤其是加载图片的。
做过多张图片的加载进度，但是对于单张图片，特别是图片比较大的时候，需要进度条告诉用户加载进度，且可以提高用户体验。
传统的加载肯定不行，需要用到 AJAX 加载，AJAX 加载有个专门的进度事件 progress。
具体demo 如下。实现目标：
立即学习“Java免费学习笔记（深入）”；
加载某图片，且显示加载百分比进度；加载完毕后，就展示该图片。
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（视频）
以上就是JavaScript介绍AJAX加载单张图片展示进度的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2718374.html
