我知道正确的延迟加载通常需要使用对象和代理模式。我还没有到达那里,因为网站需要重新设计。但是,有什么方法仍然可以将数据库数据假脱机到页面并稍微加快加载时间吗?

有帮助吗?

解决方案

这可以通过 AJAX 来实现。

当您第一次加载页面时,将占位符放在应该放置大量内容的位置。例如,使用 div 具有独特的风格和内部动画加载图像,因此访问者可以清楚地知道正在进行更多加载。您可以在以下位置生成熟悉的 AJAX 加载图像: ajaxload.info.

在页面底部放置一些脚本,用于调用或绑定必要的函数以使用 AJAX 加载附加内容。您可以将 AJAX 调用绑定到 jQuery .ready() 例如,一旦文档的其余部分准备好就开始加载或 .scroll() 当用户滚动到某个元素上时启动(例如超过页面上分隔内容块的某些“地标”)。

当您收到包含附加内容(最好预先格式化为字符串形式的 HTML)的 AJAX 响应时,替换占位符的内容 div 与 AJAX 响应使用 .innerHTML = 或者 jQuery 的 .html(). 。改变风格 div 如果需要的话使用 setAttribute("class","newClass") 或者 jQuery 的 .attr("class","value") 替换它的 CSS 类。

访问者将能够看到您的完整页面并在加载过程中滚动浏览它。附加内容将在准备好后显示,而不会中断访问者的浏览体验。您可以通过在内容注入后设置过渡动画来使眼睛看起来更舒服。

如果您需要一些有关如何使用 AJAX 异步获取内容的其他示例,请查看 这些 对于经典的 JavaScript 方法或 jQuery .ajax() 文档.

其他提示

您可以在主页加载后立即使用JavaScript开始加载额外数据。这样您的主页可以概述页面上的组件,显示“旋转器”,表示正在加载更多数据,然后将其卸载到JavaScript以获取更多数据。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top