JavaScript介绍AJAX加载单张图片展示进度的方法


本文摘自PHP中文网,作者coldplay.xixi,侵删。

免费学习推荐:js视频教程

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

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

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

具体demo 如下。实现目标:

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

HTML 结构:

1

2

3

4

5

6

<p id="pro">

    0%

</p>

<p id="box">

    内容加载中。。。

</p>

JavaScript:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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)} >`;

});

这里需要说明的是:

1

req.responseType = "blob";

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

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

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

相关免费学习推荐:javascript(视频)

以上就是JavaScript介绍AJAX加载单张图片展示进度的方法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

linux服务器搭建node.js环境的步骤介绍

浅谈javascript中检查数组是否包含指定值的几种方法

javascript如何判断字符串中是否包含某个字符串

javascript中var、let和const之间有什么区别?

javascript如何修改html

html5 canvas实现中奖转盘的实例代码

angularjs的ng-bind-html指令详解

javascript库是什么东西

object.fromentries和object.entries的使用

给大家分享九个 javascript 图片懒加载库

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...