个人中心
文章发布
退出
作者热门文章
- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
24
4
我有一个网络应用程序，用户可以在其中生成 PDF 和 PowerPoint 文件。这些文件可能需要一些时间来生成，所以我希望能够在它生成时显示加载动画。这里的问题是我不知道什么时候开始下载。动画永远不会消失。
我知道可以在“侧面”生成文件并在文件准备好使用 AJAX 下载时提醒用户，但我更喜欢在用户等待下载开始时“锁定”用户.
最佳答案
要了解这里需要做什么，让我们看看这种请求通常会发生什么。
用户点击按钮请求文件。
生成文件需要时间(用户得不到反馈)。
文件完成并开始发送给用户。
我们想要添加的是一个反馈，让用户知道我们在做什么......在第 1 步和第 2 步之间，我们需要对点击使用react，并且我们需要找到一种方法来检测何时发生第 3 步删除视觉反馈。我们不会让用户知道下载状态，他们的浏览器会像处理任何其他下载一样执行此操作，我们只是想告诉用户我们正在处理他们的请求。
为了让文件生成脚本与请求者页面的脚本进行通信，我们将使用 cookie，这将确保我们不依赖于事件、iframe 等浏览器。在测试了多种解决方案之后，从 IE7 到最新的手机，这似乎是最稳定的。
我们将使用 javascript 在屏幕上显示通知。我在整个页面上选择了一个简单的透明黑色覆盖层，以防止用户与页面的其他元素进行交互，因为点击链接可能会使他失去接收文件的可能性。
$('#downloadLink').click(function() {
$('#fader').css('display', 'block');
});#fader {
opacity: 0.5;
background: black;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="fader"></div>
<a href="#path-to-file-generator" id="downloadLink">Click me to receive file!</a>
</body>简单的部分已经完成，现在我们需要通知 JavaScript 文件正在下载。当一个文件被发送到浏览器时，它会与通常的 HTTP header 一起发送，这允许我们更新客户端 cookie。我们将利用此功能提供适当的视觉反馈。让我们修改上面的代码，我们需要设置cookie的起始值，并监听它的修改。
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 + '; 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));
}
}
};
$('#downloadLink').click(function() {
$('#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.
});
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.
}
};#fader {
opacity: 0.5;
background: black;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="fader"></div>
<a href="#path-to-file-generator" id="downloadLink">Click me to receive file!</a>
</body>好的，我们在这里添加了什么。我已经放了我使用的set/getCookie函数，不知道是不是最好的，但是效果很好。当我们开始下载时，我们将 cookie 值设置为 0，这将确保任何其他过去的执行都不会干扰。我们还启动一个“超时循环”来每秒检查 cookie 的值。这是代码中最有争议的部分，使用超时循环函数调用等待 cookie 更改可能不是最好的，但它是在所有浏览器上实现这一点的最简单方法。因此，我们每秒都会检查 cookie 的值，如果该值设置为 1，我们会隐藏褪色的视觉效果。
在 PHP 中，可以这样做:
setCookie("downloadStarted", 1, time() + 20, '/', "", false, false);
在 ASP.Net 中
Response.Cookies.Add(new HttpCookie("downloadStarted", "1") { Expires = DateTime.Now.AddSeconds(20) });
cookie 的名称是 downloadStarted，它的值是 1，它在 NOW + 20 秒 后过期(我们每秒检查一次，所以 20 是绰绰有余，如果您更改 javascript 中的超时值，请更改此值)，它的路径在整个域上(根据您的喜好更改)，它不安全，因为它不包含敏感数据并且它不是仅 HTTP所以我们的 JavaScript 可以看到它。
瞧!总结起来就是这样。请注意，提供的代码在我正在使用的生产应用程序上完美运行，但可能不适合您的确切需求，请根据您的喜好进行更正。
关于javascript - 生成文件以供下载时如何显示加载动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29532788/
24
4
0
我的Angular-Component位于一个flexbox(id =“log”)中。可以显示或隐藏flexbox。 我的组件内部有一个可滚动区域，用于显示日志消息。 (id =“message-li
我真的很困惑 有一个 phpinfo() 输出: MySQL 支持 启用 客户端 API 版本 5.5.40 MYSQL_MODULE_TYPE 外部 phpMyAdmin 显示: 服务器类型:Mar
我正在研究这个 fiddle : http://jsfiddle.net/cED6c/7/我想让按钮文本在单击时发生变化，我尝试使用以下代码: 但是，它不起作用。我应该如何实现这个？任何帮助都会很棒
我应该在“dogs_cats”中保存表“dogs”和“cats”各自的ID，当看到数据时显示狗和猫的名字。 我有这三个表: CREATE TABLE IF NOT EXISTS cats ( id
我有一个字符串返回到我的 View 之一，如下所示: $text = 'Lorem ipsum dolor ' 我正在尝试用 Blade 显示它: {{$text}} 但是，输出是原始字符串而不是渲染
我无法让我的链接(由图像表示，位于页面左侧)真正有效地显示一个 div(包含一个句子，位于中间)/单击链接时隐藏。 这是我的代码: Practice
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
最初我使用 Listview 来显示 oracle 结果，但是最近我不得不切换到 datagridview 来处理比 Listview 允许的更多的结果。然而，自从切换到数据网格后，我得到的结果越来越
我一直在尝试插入一个 Unicode 字符 ∇ 或 ▽，所以它显示在 Apache FOP 生成的 PDF 中。 这是我到目前为止所做的: 根据这个基本帮助 Apache XSL-FO Input，您
我正在使用 node v0.12.7 编写一个 nodeJS 应用程序。 我正在使用 pm2 v0.14.7 运行我的 nodejs 应用程序。 我的应用程序似乎有内存泄漏，因为它从我启动时的大约 1
好的，所以我有一些 jQuery 代码，如果从下拉菜单中选择了带有前缀 Blue 的项目，它会显示一个输入框。 代码: $(function() { $('#text1').hide();
当我试图检查 Chrome 中的 html 元素时，它显示的是 LESS 文件，而 Firefox 显示的是 CSS 文件。 (我正在使用 Bootstrap 框架) 如何在 Chrome 中查看 c
我是 Microsoft Bot Framework 的新手，我正在通过 youtube 视频 https://youtu.be/ynG6Muox81o 学习它并在 Ubuntu 上使用 python
我正在尝试转换从 mssql 生成的文件到 utf-8。当我打开他的输出 mssql在 Windows Server 2003 中使用 notepad++ 将文件识别为 UCS-2LE我使用 file
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我正在尝试执行单击以打开/关闭一个 div 的功能。 这是基本的，但是，点击只显示 div，当我点击“关闭”时，没有任何反应。 $(".inscricao-email").click(function
假设我有 2 张卡片，屏幕上一次显示一张。我有一个按钮可以用其他卡片替换当前卡片。现在假设卡 1 上有一些数据，卡 2 上有一些数据，我不想破坏它们每个上的数据，或者我不想再次重建它们中的任何一个。
我正在使用 Eloquent Javascript 学习 Javascript。 我在 Firefox 控制台上编写了以下代码，但它返回:“ReferenceError:show() 未定义”为什么？
我正在使用 Symfony2 开发一个 web 项目，我使用 Sonata Admin 作为管理面板，一切正常，但我想要做的是，在 Sonata Admin 的仪表板菜单上，我需要显示隐藏一些菜单取决
我试图显示一个div，具体取决于从下拉列表中选择的内容。例如，如果用户从列表中选择“现金”显示现金div或用户从列表中选择“检查”显示现金div 我整理了样本，但样本不完整，需要接线 http://j
我是一名优秀的程序员,十分优秀！