问题标签 [loading-animation]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 加载 iframe 后删除加载器动画
我正在维护一个将所有内容都包含在 iframe 中的 Web 应用程序。快速分解其结构：（每个“-”代表一个新层）
基本上，一个主框架内有 4 个 iFrame。我有一个加载器动画，我需要在所有 iframe 完成加载后从屏幕上删除它。每个 iframe 都有数据，这些数据通过页面上的选择进行更新。我需要的是每次更新后加载动画覆盖整个屏幕。处理此问题的最佳方法是什么？我知道你可以使用
确定 iframe 何时完成加载。有没有一种简单的方法可以一次收听所有这些，然后在它们完成后关闭加载动画？谢谢您的帮助。
以下是每个 iframe 的创建方式：
接着：
if (ConfigData["GlobalOptions"].Quadrants[x].QuadrantId == "1") {
$("#q1Container").html(p1HTML);
}
javascript - 如何在角度的每个状态变化上运行加载动画脚本
我正在使用以下脚本在我的应用程序中显示加载动画。
当页面第一次加载时，这工作正常。每次状态更改时如何执行它，因为在某些状态下会获取新数据。
我试着调用这个脚本
但是随后应用程序将无限加载，并且永远不会停止加载。
javascript - 如何检测网页是否正在等待 php 脚本
在我正在处理的这个 web 项目中，用户可以使用简单的 input[type=file] 将图像和文件上传到页面。但是这个功能在其他地方的 php 脚本中，所以我们在网页中放置了一个 iframe 链接到 php 脚本。现在，当我上传文件时，我在加载文件时有很长的等待时间，并且我在浏览器的左下方看到“在本地主机上等待”（使用 MAMP）。有没有办法可以检测到网页正在等待 php 脚本完成执行，以便我可以显示加载动画并禁用提交按钮？我不能使用 jQuery。
javascript - Highcharts 开头显示Loading
我试图在我的页面打开时显示加载文本或动画，但不知何故它不起作用，我并没有从这个解释中变得更明智：http: //api.highcharts.com/highstock/Chart.showLoading 我有还使用按钮检查了各种示例，但不幸的是它对我也不起作用。这是我的代码片段：
我非常感谢任何帮助。
typescript - 加载动画，直到数据加载到 Typescript (ionic)
我想在项目加载之前向屏幕添加动画。
我的第一个想法是实现一个 settimeout，这是最坏的解决方案。有没有解决这个问题的好方法？
vue.js - Vue.js 注入样式而不是 index.html (webpack, HtmlWebpackPlugin)
基本上，我想实现这个index.html结构：
我想要这个的原因是，我的 html 完全能够向用户显示初始加载动画，我希望它在加载后立即index.html呈现，而不依赖于任何其他资源。真的，我想这是每个人都想要的，只是说...
但是 Vue by debault 被配置为包含它被编译styles到<head>标签中，这会阻止页面的呈现，直到这些样式被加载。我找不到任何关于如何更改它的文档。
更新：图片！
因此，我设法手动模拟了两种变体：
- 样式被注入
<head>（默认） - 样式被注入
<body>（需要）
以下是视觉差异的图片：
1）样式被注入<head>（默认）：
2）样式被注入<body>（想要）：
图片上的“html 渲染开始”标签意味着用户实际上看到加载动画，完全在 html 内部定义（在我的例子中，一小块 svg 和样式，一般情况下可以是任何东西）并且不依赖于任何其他外部资源让它渲染。
javascript - 为 React JS Ajax 调用创建加载动画的最佳方法是什么？
我有一个 React JS (16.13.1) 应用程序——我有兴趣创建一些加载动画，以便在加载内容时在容器中显示。我希望以一种可以提供一些可重用性的方式来做到这一点，如下例所示：
理论上，我会拥有一个名为 LoadingAnimation 的组件，可以在此页面上调用它——最好是在页面加载时，或者甚至只是在启动 AJAX 请求时调用。我意识到这需要侦听器、回调和 Promise 的某种组合才能做到这一点。我只是无法弄清楚这个出现的正确流程/顺序。
为了使其可重用，我会让组件显示动画，监听 ajax 请求的完成，然后将数据传递给视图组件中的回调进行渲染；以便从动画组件中抽象出提升，但处理事件的调度或任何可能的事件。
我怎样才能做到这一点？
swift - 如何使用 SwiftUI 实现加载动画？
我已经在 AfterEffects 中制作了一个动画，我认为 Lottie 可以将其转换为我可以用于我的应用程序的格式。我想知道的是如何让应用程序在打开时开始执行此动画，直到应用程序完成加载？
javascript - JavaScript/Electron：如何强制同步添加加载动画，调用函数，然后删除动画？（无意异步）
我目前正在开发一个 Electron 应用程序来练习一个人的词汇量。本质上，我有一些以一种语言保存的句子，如果用户按下按钮，随机选择的句子会被翻译成另一种语言，然后用户必须将其翻译成另一种语言。
有时，翻译需要几秒钟，在此期间，我想显示一个加载动画 - 我这里基本上复制了#5的代码（基本上只是在下面的函数中添加的HTML元素加上CSS）。
现在，我的问题是：加载动画没有显示（即使在长时间等待期间），这似乎是因为代码执行有点异步。动画本身可以正常工作，因为如果我不在函数结束时将其删除，它就会显示出来，但如果我不这样做，它甚至永远不会出现，即使翻译内容需要几秒钟。执行顺序应该是document.body.appendChild(loadElem); -> doTranslationStuffAndSetHTML(); -> document.body.removeChild(loadElem);，但似乎是document.body.appendChild(loadElem); -> document.body.removeChild(loadElem); -> doTranslationStuffAndSetHTML();，或类似的东西。我知道翻译需要几秒钟，因为整个页面在这段时间内冻结，直到显示翻译的句子（所有这些都发生在doTranslationStuffAndSetHTML()）。我也尝试过使用 Promises，但无济于事。有人可以帮我吗？有没有办法检查页面是否已更新，以及是否已将新元素添加到其 HTML 代码中（例如，不仅添加了，而且已经显示）？是 Electron 的问题，还是编译器在尝试优化代码执行时出错？
doTranslationStuffAndSetHTML 的实际代码如下：
尽管这里唯一相关的一点可能是 vocabHandler.getPhrase 调用了一个翻译函数，该函数调用了一个 Python 脚本，该脚本使用Google Translate API将给定的短语翻译成指定的语言。
python - 在 Tkinter 中从 Web 中提取数据时制作加载动画
我从互联网上提取数据并将其显示在画布上。在获取数据时过了一点时间，我想在画布上显示加载动画或进度条。从理论上讲，我设法做到了，它应该在进度条开始提取数据并在提取数据后停止但它不起作用时工作。我应该怎么办？