渐进式增强，当页面尚未完全加载时的行为

Question

我正在开发使用jQuery中完全实现的渐进增强的网站。例如，我将onclick事件处理程序动态添加到锚定标签中，使用SoundManager“inline”播放链接的MP3文件，并通过$（document）.ready（function（））弹出Youtube播放器的Youtube链接。

但是，如果用户在页面加载时单击它们，它们仍会获得非增强版本。我想过隐藏相关的东西（通过显示：没有，或类似的东西），并显示它加载时，或放置模式“加载”对话框，但都听起来像黑客。

有什么更好的点子？我觉得我错过了一些完全明显的东西。

问候，

亚历

Answer 1

我还没有测试过这个，但你可以试试live。我们的想法是，您可以将您的点击处理程序放在document.ready之外，以便它们立即执行。由于live使用event delegation来实现其功能，因此您并不需要等待DOM准备就绪，并且在加载页面时所做的任何点击仍应由事件处理程序捕获。

如果这不起作用，您可以尝试将Javascript脚本标记直接放在需要绑定的任何地方下面。这不太好，但它几乎可以消除这个问题。

Answer 2

假设你已经使用良好的判断力和人民正在下降的非增强型版本，只是因为延时太长，那么我会用CSS禁用控制。 CSS几乎会立即加载。然后使用Javascript我会切换CSS，使控件重新启用。

但是，我的第一反应是，如果用户可以在页面加载时单击它，那么您的页面或连接速度太慢。但是，如果这种情况很少 - 少于1％ - 那么只要用户可以实现他的目标，那就是听他的音乐，那么你就可以摆脱它。我这样说是因为一旦用户意识到等待半秒钟后有更好的体验，他通常会等待Javascript呈现并点击。

Answer 3

对于使用CSS，我采取了与aleemb相反的立场。如果您使用css来禁用控件，那么任何禁用javascript或正在使用辅助功能软件的人都将无法使用这些控件，而无需完全禁用样式表。

您可以在关闭body标签之前使用非常小的内嵌javascript，以便通过js很快地隐藏元素。如果它是内联的，并且不需要加载外部资源，它将非常快速，通常比用户可以点击的速度快。

不过，我做与aleemb同意，如果您的用户能够在精神上处理页面，并使其他们希望加载的JS之前单击控件，则可能是路上你的页面一个更深层次的问题正在加载。寻找减少加载时间的方法：压缩图像文件，gzipping html/css/js文件，缩小你的javascript，将图像合成为精灵等。

Answer 4

我会建议以下Paolo Bergantino's advise - 事件代表团是完全避免这个问题的方法。

我有类似的问题，事件代表团无法完成这项工作 - 您可以read about that here。