您好,登录后才能下订单哦!
小编给大家分享一下JavaScript中如何使用AJAX加载单张图片展示进度,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
用手机上网,经常看到加载进度条,尤其是加载图片的。
做过多张图片的加载进度,但是对于单张图片,特别是图片比较大的时候,需要进度条告诉用户加载进度,且可以提高用户体验。
传统的加载肯定不行,需要用到 AJAX 加载,AJAX 加载有个专门的进度事件 progress。
具体demo 如下。实现目标:
加载某图片,且显示加载百分比进度;加载完毕后,就展示该图片。
HTML 结构:
<p id="pro"> 0% </p> <p id="box"> 内容加载中。。。 </p>
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 = `<img src = ${window.URL.createObjectURL(blob)} >`; });
这里需要说明的是:
req.responseType = "blob";
设置请求数据类型为 blob 类型。Binary large Object,就是较大的二进制对象,可以用来加载非文本数据。此demo 加载的是一张图片。
因此,在接受返回数据的时候,不是 reponseText 。
window.URL.createObjectURL(blob) 会基于 blob 对象生成对象的URL路径。这样,就可以在浏览器中看到 blob 所代表的资源(图片,视频,音频等)
以上是“JavaScript中如何使用AJAX加载单张图片展示进度”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。