[英]Display an animation while loading a page using JQuery
I have a page that takes information from a database.我有一个从数据库中获取信息的页面。 It exports a lot of information, so it takes a few seconds to load.
它导出了大量信息,因此加载需要几秒钟。 I do have an animation, but it is not behaving how I want it to behave.
我确实有一个 animation,但它并没有表现出我想要的表现。 When a user clicks on a link, I want there to be a loading animation instantly, and it shows until the data on the page actually loads.
当用户单击链接时,我希望立即加载 animation,它会显示直到页面上的数据实际加载。
Here is what it actually does: When I click on a link, I wait 5 seconds, then the page loads with the animation, then the data loads.下面是它的实际作用:当我点击一个链接时,我等待 5 秒钟,然后页面加载 animation,然后加载数据。 The problem is that I want the animation to run instantly, not wait 5 seconds, then run for half a second, then the data loads.
问题是我希望 animation 立即运行,而不是等待 5 秒,然后运行半秒,然后加载数据。
Here is my current JQuery code:这是我当前的 JQuery 代码:
$(document).ready(function() {
$("#content").hide();
$(window).load(function() {
$("#content").show();
$("#content-loading").hide();
})
})
content is the content that takes a while to load and content-loading has the loading animation. content 是需要一段时间才能加载的内容,content-loading 有加载 animation。
$(document).ready()
will only run when the DOM is done downloading, basically when </html>
is downloaded at the end of your page. $(document).ready()
只会在 DOM 下载完成时运行,基本上是在页面末尾下载</html>
时。 If your database data is part of the page, it will be loaded by the time the DOM ready event fires.如果您的数据库数据是页面的一部分,它将在 DOM 就绪事件触发时加载。 Meanwhile,
$(window).load()
will fire when all the resources on the page have loaded;同时,当页面上的所有资源都加载完毕后,
$(window).load()
会被触发; all the images, external stylesheets, etc.所有图像、外部样式表等。
Perhaps you could have a stylesheet before the data which hides the content, then an internal stylesheet at the bottom of your page, after the data, which makes the content display and the #content-loading element hidden?也许您可以在隐藏内容的数据之前有一个样式表,然后在页面底部的数据之后有一个内部样式表,这使得内容显示和#content-loading 元素隐藏?
Otherwise, you could load the data asynchronously in some way, with AJAX or in a frame.否则,您可以使用 AJAX 或在帧中以某种方式异步加载数据。
http://fgnass.github.io/spin.js/ http://fgnass.github.io/spin.js/
See this, if you want to add a loading.....看到这个,如果你想添加一个加载.....
your animation won't run until the whole page is loaded (including all that db stuff).你的 animation 直到整个页面被加载(包括所有数据库的东西)才会运行。 Instead, load a page that has just your animation, and an AJAX call to the db data.
相反,加载一个页面,其中只有您的 animation,以及对 db 数据的 AJAX 调用。 Then the db call is asynchronous.
然后db调用是异步的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.