渐进增强，页面尚未完全加载时的行为
我正在使用完全在 jQuery 中实现的渐进增强功能来开发网站。
例如，我将 onclick 事件处理程序动态添加到锚标记，以使用 SoundManager“内联”播放链接的 MP3 文件，并通过 $(document).ready(function()) 弹出 Youtube 播放器以获取 Youtube 链接。
但是，如果用户在页面加载时单击它们，他们仍然会获得非增强版本。
我考虑过隐藏相关的东西（通过显示：无，或类似的东西）并在加载时显示它，或者放置一个模式“加载”对话框，但这两种听起来都像是黑客。
还有更好的想法吗？ 我觉得我在这里遗漏了一些完全明显的东西。
问候，
亚历克斯
I'm developing sites using progressive enhancement implemented completely in jQuery.
For instance, I'm adding onclick event handlers dynamically to anchor tags to play linked MP3 files "inline" using SoundManager and popping up Youtube players for Youtube links, through $(document).ready(function()).
However, if the user clicks on them while the page is loading, they still get the non-enhanced version.
I've thought about hiding the relevant stuff (via display: none, or something like that) and showing it when loaded, or putting a modal "loading" dialog, but both sound like hacks.
Any better ideas? I feel I'm missing something completely obvious here.
Regards,
Alex
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我还没有对此进行测试，但您可以尝试
live。 我们的想法是，您可以将点击处理程序放在 document.ready 之外，以便它们立即执行。 由于live使用 事件委托来实现它的功能，你实际上不需要等待 DOM 准备好，并且页面加载时进行的任何点击仍然应该被捕获事件处理程序。如果这不起作用，您可以尝试将 Javascript 脚本标记直接放在它们需要绑定的任何内容下方。 这并不漂亮，但它几乎可以消除问题。
I haven't tested this, but you could try
live. The thinking is that you could put your click handlers outside of document.ready so they get executed right away. Sinceliveuses event delegation to achieve it's functionality, you don't really need to wait for the DOM to be ready, and any clicks that are made while the page is loading should still be captured by the event handler.If that doesn't work, you could try putting the Javascript script tags directly underneath whatever they need to bind. It's not pretty, but it will pretty much eliminate the problem.
假设您做出了良好的判断，并且人们只是因为延迟太长而爱上了非增强版本，那么我会使用 CSS 来禁用控件。 CSS 几乎会立即加载。 然后使用 Javascript 我会切换 CSS，以便重新启用控件。
然而，我的第一反应是，如果用户可以在页面加载时点击它，那么你的页面或连接太慢了。 然而，如果这种情况很少发生——少于 1% 的时间——那么只要用户能够实现他的目标，即听他的音乐，你就可以不理会它。 我这么说是因为一旦用户意识到半秒后会有更好的体验，他通常会等待Javascript渲染然后点击。
Assuming you have used good judgement and people are falling for the non-enhanced version just because the delay is too long then I would use CSS to disable the controls. The CSS will load almost right away. Then using Javascript I would toggle the CSS so the controls are re-enabled.
However, my first reaction is that if the user can click it while the page is loading, then your page or connection is too slow. However, if this is seldom the case--less than 1% of the time--then you can shrug it off as long as the user can achieve his goal, that is listen to his music. I say this because once the users realizes that a better experience awaits half a second later, he will usually wait for Javascript to render and then click.
关于使用 CSS，我与 aleemb 持相反的立场。 如果您使用 css 来禁用控件，那么任何禁用了 javascript 或正在使用辅助功能软件的人都将无法在不完全禁用样式表的情况下使用这些控件。
您可以在结束 body 标记之前使用一个非常小的内联 javascript，通过 js 快速隐藏元素。 如果它是内联的并且不需要加载外部资源，那么它会非常快，通常比用户单击的速度还要快。
然而，我确实同意 aleemb 的观点，如果你的用户能够在你的 js 加载之前在心里处理页面并使其进入他们想要单击的控件，那么你的方式可能存在更深层次的问题。页面正在加载。 研究减少加载时间的方法：压缩图像文件、gzip 压缩 html/css/js 文件、缩小 JavaScript、将图像组合成精灵等。
I take the opposite stance from aleemb regarding using CSS. If you use css to disable the controls, then anyone who has javascript disabled or is using accessibility software will be unable to use those controls without disabling your stylesheet entirely.
You could use a very small inline javascript right before the closing body tag to hide the elements via js really quickly. If it's inline and doesn't have to load external resources it will be very fast, generally faster than a user can click.
However, I do agree with aleemb that if your users are able to mentally process the page and make it to the control they want to click before your js is loaded, there's probably a deeper problem with the way your page is loading. Look into ways to decrease load time: compressing image files, gzipping html/css/js files, minify your javascript, combine images into sprites, etc.
我建议遵循Paolo Bergantino的建议 - 事件委托是完全避免该问题的方法。
我遇到了类似的问题，事件委托无法完成这项工作 - 您可以 在此处阅读相关内容。
I'd suggest following Paolo Bergantino's advise - event delegation is the way to go to avoid the problem altogether.
I had a similar issue where event delegation couldn't do the job - you can read about that here.