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

背景:
当实现下载文件等后台需长时间处理时，用户点击页面的一个按钮或链接，应给予用户一定提示告知用户后台正在处理中，稍后返回结果。
目前常见的处理方法有页面跳出图层，比如"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 = https://www.it610.com/article/escape(value) + ((expiracy == null) ?"" : "; expires=" + exdate.toUTCString()); document.cookie = name + "=" + c_value + '; path=/'; }; var getCookie = function(name) { var i, x, y, ARRcookies = document.cookie.split("; "); for (i = 0; i < ARRcookies.length; i++) { x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); x = x.replace(/^\s+|\s+$/g, ""); if (x == name) { return y ? decodeURI(unescape(y.replace(/\+/g, ' '))) : y; //; //unescape(decodeURI(y)); } } }; var downloadTimeout; var checkDownloadCookie = function() { if (getCookie("downloadStarted") == 1) { setCookie("downloadStarted", "false", 100); //Expiration could be anything... As long as we reset the value $('#fader').css('display', 'none'); } else { downloadTimeout = setTimeout(checkDownloadCookie, 1000); //Re-run this function in 1 second. } }function download(url) { $('#fader').css('display', 'block'); setCookie('downloadStarted', 0, 100); //Expiration could be anything... As long as we reset the value setTimeout(checkDownloadCookie, 1000); //Initiate the loop to check the cookie. window.location.href = https://www.it610.com/article/url; }

CSS:

#fader { opacity: 0.5; background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; }

【Java|正在下载中，请稍候的Loading加载中浮层效果实现】HTML: