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

Question

我正在使用在jQuery中完全实现的渐进增强来开发网站。

例如，我正在动态添加onclick事件处理程序以锚定标签，使用SoundManager“内联”播放链接的MP3文件，并通过$（document）.ready（function（））弹出Youtube播放器以获取Youtube链接。 / p>

但是，如果用户在加载页面时点击它们，它们仍会获得非增强版本。

我曾考虑隐藏相关的东西（通过显示：无，或类似的东西）并在加载时显示它，或者放置模态“加载”对话框，但两者听起来像黑客。

有更好的想法吗？我觉得我错过了一些完全明显的东西。

此致

亚历

Answer 1

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

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

Answer 2

假设你已经使用了良好的判断力而且人们因为延迟时间过长导致非增强型版本下降，那么我会使用 CSS来禁用控件。 CSS几乎会立即加载。然后使用Javascript我会切换CSS，以便重新启用控件。

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

Answer 3

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

您可以在关闭正文标记之前使用非常小的内联JavaScript，以便通过js快速隐藏元素。如果它是内联的并且不必加载外部资源，它将非常快，通常比用户可以点击的速度快。

然而，我做同意aleemb，如果您的用户能够在您的js加载之前精神处理页面并使其成为他们想要点击的控件，那么可能存在更深层次的问题页面加载的方式。研究减少加载时间的方法：压缩图像文件，gzipping html / css / js文件，缩小你的javascript，将图像组合成精灵等等。

Answer 4

我建议关注Paolo Bergantino's advise - 事件委托是完全避免问题的方法。

我有一个类似的问题，即事件委托无法完成工作 - 你可以read about that here。