如何为 php 页面构建页面预加载器？
我想为我的应用程序中的所有页面包含一个页面预加载器。就像 Gmail 在后台加载整个页面时显示的内容一样。我不想要预加载栏，只是在整个页面在后台加载并在成功加载后显示时立即显示预加载消息的机制。
以网站为例：http://www.emirates.com/ae/english/ 只需搜索任何航班 - 您会看到一条预加载消息，然后加载页面。我在这里没有看到任何重定向。
我如何实现这个 - 我的网站是使用 php 和大量 javascript 构建的。
I want to include a page preloader for all pages on my application. Something like what Gmail displays when its loading the entire page in the background. I don't want a prelaoding bar just the mechanism to display immediately a preloading message while the entire page loads in the background and upon successful load is displayed.
Take for an example the site: http://www.emirates.com/ae/english/ just run a search for any flight - you see a preloading message after which teh page is loaded. I don't see any redirects here.
How do I implement this - my site is built using php and tonnes of javascript.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您的 HTML 写出一条预加载消息，然后您设置一个 javascript onload 事件。此事件调用 JavaScript 代码通过 AJAX 加载您需要的任何数据，然后最终隐藏加载消息并显示实际页面。
当然，这意味着不会 JavaScript 的人将会遇到问题 - 你必须为他们排序一些东西，或者决定你可以在没有它们的情况下生活。
ADD：哦，您可能需要先检查一下您所在国家/地区的残疾人法律，然后再决定您是否可以在没有这些法律的情况下生活 - 您可能有法律责任让残疾人可以访问您的网站。我只在严重依赖 JS 的网站上使用过这种技术，没有它就无法运行。注意 GMail 有 2 个接口 - 一个 JS 和一个纯 HTML。这就是他们提供服务的方式。
添加：http://code.google.com/p/bobchess/ 是一些代码我已经这样做了。一条加载消息，然后一个 onload 事件来启动应用程序。
Your HTML writes out a pre-loading message, and you then set up a javascript onload event. This event calls JavaScript code to load whatever data you need via AJAX, then finally hide the loading message and shows the actual page.
Of course, this means people with no JavaScript will have problems - you have to sort something for them or decide you can live without them.
ADD: Oh, and you may want to check the disability laws in your country before deciding you can live without them - you may have a legal responsibility to make your site accessible to the disabled. I've only ever used this technique on sites that rely on JS so heavily they can't run without it. Note GMail has 2 interfaces - one JS and one plain HTML. This is how they make their service accessible.
ADD: http://code.google.com/p/bobchess/ is some code I've done that does this. A loading message and then an onload event to start the application.
我会为您的 的所有内容使用包装 DIV 元素。元素并通过 CSS 可见性 属性隐藏它。确实使用了 javascript，最后我将显示 DIV 元素。当 DIV 元素显示时，预加载器将被绝对定位并隐藏。
Visibility 属性的优点是，当您将其更改为值 visible 时，布局就会准备就绪（与属性 显示)
编辑： 我认为您几乎总是可以避免预加载器。您可以通过索引加速 sql 查询。显示较少的结果等等。我个人不喜欢等待，预加载器也不能让我感到太多安慰。
I would use a wrapper DIV element for all the content of your <body> element and hide it via CSS visibility property. Did work with javascript and at the end I would display the DIV element. The preloader would be absolutely positioned and hiden when DIV element would be displayed.
Visibility property has the advantage that the layout will be ready when you change it to value visible (not as with the property display)
EDIT: I think that you can almost always avoid pre-loaders. You can speed up your sql queries by indexes. Display less results and so on. I personally don't like to wait and preloader doesn't comfort me much.
我同意 MartyIX 的观点，但问题是您的系统可以处理的查询数量，索引是一个选项，但它取决于服务器上的事务量。我确实认为我们错过了重点，我们的预加载器是为了美化网站，这样客户在等待时就不会看到难看的空白页面:)
I agree with MartyIX but the problem is the number of queries your system can handle, indexing is an option but it depends on volume of transactions on your servers. I do think we missed the whole point though, pre-loaders we meant to beautify the site, so the customers don't see ugly blank page while they wait :)