本文摘自PHP中文网,作者coldplay.xixi,侵删。
免费学习推荐:js视频教程
用手机上网,经常看到加载进度条,尤其是加载图片的。
做过多张图片的加载进度,但是对于单张图片,特别是图片比较大的时候,需要进度条告诉用户加载进度,且可以提高用户体验。
传统的加载肯定不行,需要用到 AJAX 加载,AJAX 加载有个专门的进度事件 progress。
具体demo 如下。实现目标:
加载某图片,且显示加载百分比进度;加载完毕后,就展示该图片。
HTML 结构:
1 2 3 4 5 6 |
|
JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
这里需要说明的是:
1 |
|
设置请求数据类型为 blob 类型。Binary large Object,就是较大的二进制对象,可以用来加载非文本数据。此demo 加载的是一张图片。
因此,在接受返回数据的时候,不是 reponseText 。
window.URL.createObjectURL(blob) 会基于 blob 对象生成对象的URL路径。这样,就可以在浏览器中看到 blob 所代表的资源(图片,视频,音频等)
相关免费学习推荐:javascript(视频)
以上就是JavaScript介绍AJAX加载单张图片展示进度的方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript中var、let和const之间有什么区别?
object.fromentries和object.entries的使用
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者