“延迟加载”程序中 PHP 页面上数据库中的信息
我知道正确的延迟加载通常需要使用对象和代理模式。我还没有到达那里,因为网站需要重新设计。但是,有什么方法仍然可以将数据库数据假脱机到页面并稍微加快加载时间吗?
I know proper lazy loading usually requires using objects and a proxy pattern. I'm not there yet as a site needs some redesign. However, is there any way I can still spool out DB data to a page and speed up loading time a bit?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这可以通过 AJAX 来实现。
当您第一次加载页面时,将占位符放在应该放置大量内容的位置。例如,使用具有独特风格的
div
并在内部添加动画加载图像,以便访问者可以清楚地知道正在进行更多加载。您可以在 ajaxload.info 生成看起来熟悉的 AJAX 加载图像。在页面底部放置一些脚本,用于调用或绑定必要的函数以使用 AJAX 加载附加内容。例如,您可以将 AJAX 调用绑定到 jQuery 的
.ready()
,以便在文档的其余部分准备好或.scroll()
开始时立即开始加载当用户滚动到某个元素上时(例如,经过页面上分隔内容块的某些“地标”)。当您收到包含附加内容(最好预先格式化为字符串形式的 HTML)的 AJAX 响应时,请使用
.innerHTML =
div 的内容替换为 AJAX 响应> 或 jQuery 的.html()
。如有必要,请使用setAttribute("class","newClass")
或 jQuery 的.attr("class","value")< 更改
div
的样式/code> 来替换它的 CSS 类。访问者将能够看到您的完整页面并在加载过程中滚动浏览它。附加内容将在准备好后显示,而不会中断访问者的浏览体验。您可以通过在内容注入后设置过渡动画来使眼睛看起来更舒服。
如果您需要一些有关如何使用 AJAX 异步获取内容的其他示例,请查看这些 对于经典的 JavaScript 方法或 jQuery .ajax() 文档。
This can be achieved with AJAX.
When you first load a page, put place-holders where the heavy content is supposed to go. For example, use a
div
with a distinctive style and an animated loading image inside so visitors can clearly tell there is some more loading going on. You can generate familiar looking AJAX loading images at ajaxload.info.Have some script at the bottom of your page that calls or binds the necessary functions to load the additional content using AJAX. You could bind the AJAX call to jQuery's
.ready()
for example to have the loading start as soon as the rest of the document is ready or.scroll()
to start when the user scrolls over a certain element (e.g. past certain 'landmarks' on your page that separate blocks of content).When you receive the AJAX response that contains the additional content (preferably pre-formatted as HTML in string form) replace the contents of the placeholder
div
with the AJAX response using.innerHTML =
or jQuery's.html()
. Change the style of thediv
if necessary usingsetAttribute("class","newClass")
or jQuery's.attr("class","value")
to replace it's CSS class.The visitor will be able to see your full page and scroll through it while the loading is taking place. The additional content will appear when it's ready without interrupting the visitor's browsing experience. You can make this a little nicer for the eye by animating the transitions after the content injection.
If you need some additional examples of how to use AJAX to fetch content asynchronously have a look at these for the classical JavaScript approach or jQuery .ajax() docs.
您可以在主页加载后立即使用 JavaScript 开始加载额外数据。这样,您的主页就可以概述页面上的组件,显示“旋转器”,指示正在加载更多数据,然后将其卸载到 JavaScript 以获取更多数据。
You can use JavaScript to start loading extra data as soon as the main page loads. This way your main page can just outline the components on the page, present "spinners" indicating that more data is being loaded and then offload it to JavaScript to get more data.