0

这更像是一个最佳实践问题。

我最近开始在我一直在做的一堆项目中使用HTML5 样板,但最近发现了一些可能是个问题的东西。另一位开发人员引起了我的注意,由于某些功能在页面加载时不起作用(即使用 jQuery $.ajax 的表单),因此在文档底部加载 JS 文件可能是一个问题,进而呈现出一些可用性问题。我想就解决可能出现的此类常见问题的最佳方法获得一些意见。我一直在使用 HTML5 样板,因为我知道 Paul Irish 和朋友们已经真正考虑过这个系统并不断改进它。

示例问题:网站的主页具有使用 jQuery$.post函数提交表单值的时事通讯注册表单。用户有权输入值并按下提交,但这不会呈现任何操作,因为 js 未加载呈现可用性问题。

使用网站底部包含的 JS 的最佳方式是什么?

4

3 回答 3

3

理想情况下,您不应该将 JS 用作动作/活动的唯一推动者。无论 JS 是否存在,您的网站都需要具备能够正常工作的功能。JS 只需要添加那个额外的层。如果你遵循这条规则,那么你在哪里包含你的 JS 就无关紧要了。

无论如何,如果您确实将它包含在@thrtydot 提到的底部,则只有几秒钟的差异(除非您的 HTML 太长以至于页面顶部和加载 JS 的区域之间存在很大差距 -在这种情况下,您需要担心更大的问题)并且从长远来看应该无关紧要

于 2011-03-09T18:17:07.867 回答
2

我的建议是这样的:

  • 将所有 SCRIPT 元素放在页面底部
  • 让 jQuery 脚本位于第一个 SCRIPT 元素中
  • 让第二个 SCRIPT 元素包含一个 ready() 处理程序,用于您希望尽快变得可用的行为

像这样:

<script src="http://ajax.googleapis.com/.../jquery.min.js"></script>  
<script>
    $(function() {
        // bind the handler to the newsletter submit button
        // etc.
    });
</script>
<!-- all other external and inline scripts should be below this line -->
<script src="pluginA.js"></script>
<script src="pluginB.js"></script>
<script>
    $(function() {
        // other page load code
    });
</script>

这是你能做的最好的。

顺便说一句,无论如何,用户都希望页面在最初的几秒钟内被破坏。我一直在 Facebook、Youtube、...

于 2011-03-09T19:12:41.300 回答
0

使用您的 Ajax 表单,您可能绑定了提交或单击事件来触发 Ajax 调用,对吗?并且该绑定只能在 DOM 加载时完成(使用 jquery 就绪方法)。因此,您的代码将在 HTML 正文呈现后执行,这意味着您可以将其加载到正文的底部。

如果您发现用户在绑定 Ajax 功能之前尝试提交的问题,那么在绑定发生之前,您可能会在按钮上具有视觉上的“禁用”状态。

但是,通过在头部加载脚本文件,您会阻止任何内容的呈现,因此用户会得到一个空白页面。通常,即使您必须为功能等待片刻,获取内容也是一种更好的体验。

于 2011-03-09T18:16:56.967 回答