正在下载中，请稍候的Loading加载中浮层效果实现

最新推荐文章于 2024-07-20 15:32:00 发布

FingertipsKarma

最新推荐文章于 2024-07-20 15:32:00 发布

阅读量4.3k

点赞数 1

分类专栏： Java JavaScript 文章标签： Loading浮层正在下载中

本文链接：https://blog.csdn.net/shangrilach/article/details/83793632

版权

当需要后台长时间处理任务时，如下载文件，本文介绍了一种前端实现的加载中浮层效果。通过添加JS事件，显示Loading图层，并使用Cookie监控下载状态。后端准备好后更改Cookie状态，加载层自动消失，开始文件下载。

摘要由CSDN通过智能技术生成

背景:
当实现下载文件等后台需长时间处理时，用户点击页面的一个按钮或链接，应给予用户一定提示告知用户后台正在处理中，稍后返回结果。
目前常见的处理方法有页面跳出图层，比如"Loading…"，“后台处理中，请稍候"等。
或者直接跳到新的页面，提示"下载将在一会开始，请稍候”。等待一会儿后下载就开始了。

今天我们谈一下第一种。

原理:
前端页面点击按钮或链接时，增加JS事件，浮出Loading图层表明正在下载，添加专有下载Cookie，并添加专有下载Cookie状态的轮训任务。请求后端，后端下载准备完毕后，将下载Cookie的状态修改（此时，由于Cookie状态改变，之前加的Cookie轮训任务检测到改变并将Loading图层去除，并结束任务），将文件写回页面下载。

代码:
JS:

var setCookie = function(name, value, expiracy) {
        var exdate = new Date();
        exdate.setTime(exdate.getTime() + expiracy * 1000);
        var c_value = escape(value) + ((expiracy == null) ? "" : "; expires=" + exdate.toUTCString());
        document.cookie = name + "=" + c_value +