YUI:确保DOM元素和脚本准备就绪

时间:2010-05-07 03:57:46

标签: javascript dom yui

  1. 如果我将内联脚本放在与之交互的DOM元素之后,我是否还应该使用YUI 3的domready event? 我没有发现任何问题,而似乎就像我可以指望浏览器按顺序加载页面。 (我已经使用YUI().use('node', ...来确保我需要加载YUI函数,因为YUI脚本是一个单独的文件。)

  2. 有没有办法加快YUI 2日历等小部件的加载?
    我在页面的<head>元素中加载了appropriate script。我使用YUI().use('yui2-calendar', ...来确保Calendar小部件可用。不幸的是,当我使用日历加载页面时,这会导致短暂但明显的延迟。如果我省略YUI().use('yui2-calendar', ...代码,那么它会显示没有明显的延迟 - 但我想如果YUI脚本没有及时加载,这可能导致日历根本不显示?

  3. 关于#2,是否可以减少不存在的日历的视觉效果然后显示?
    通过指定父div的高度和宽度,我已经做得稍好一些,这样至少已经分配了空间=&gt;加载时最小的移动。

2 个答案:

答案 0 :(得分:2)

  1. 如果访问DOM元素的代码位于标记中的那些元素之后,则不需要domready。这通常适用于DOM脚本,而不仅仅是YUI。

  2. yui2-calendar与yahooapis.com/2.8.0r4/build/calendar/calendar-min.js不同。前者包括一些包装代码,用于在YUI 3实例环境中沙盒化Calendar API及其依赖项。如果您在&lt; head&gt;中包含YUI 2脚本(你可以说它应该放在&lt; body&gt;的末尾),你不需要使用yui2-calendar。这样做只会加载日历代码两次。否则,要利用YUI 3的动态异步加载,您可以从&lt; head&gt;中删除&lt; script&gt; s。并使用('yui2-calendar')。通过包含yui2- * combo&lt; script&gt;,您可以看到加快渲染时间的外观。在yui-min.js种子文件之后的标记中。请注意,Loader将始终获取css文件,因此您无需在标记中包含该文件。

    &lt; script src =“http://yui.yahooapis.com/combo?3.1.0/build/yui/yui.js”&gt;&lt; / script&gt;

    &lt; script src =“http://yui.yahooapis.com/combo?2in3.1/2.8.0/build/yui2-yahoo/yui2-yahoo.js&2in3.1/2.8.0/build /yui2-dom/yui2-dom.js&2in3.1/2.8.0/build/yui2-event/yui2-event.js&2in3.1/2.8.0/build/yui2-calendar/yui2-calendar.js “&GT;&LT; /脚本&GT;

  3. 您可以在页面加载时包含呈现日历的css和标记,然后渲染到标记容器中。我不认为YUI 2日历有逐步增强现有标记的概念,但我可能是错的。它应该使用生成的标记来破坏静态表标记,并使UI生效。

答案 1 :(得分:1)

如果它位于所述节点之后,那么您不需要DOMContentLoaded(或domready)。