页面完全呈现后加载 JavaScript答案

【问题标题】：Load JavaScript after page is fully rendered页面完全呈现后加载 JavaScript
【发布时间】：2011-04-12 20:01:40
【问题描述】：

我已将 JavaScript 代码添加到我的 Drupal 7 主题中，但它无法按预期运行，因为我的函数被触发时 css 未正确应用。
所以我尝试了一个最小的实现来检查发生了什么。

    jQuery(document).ready(function($) {

         alert("Start");  

    }

alert() 在页面完全加载之前被触发（即所有标题都丢失了）。我怎样才能防止这种情况发生？

【问题讨论】：

这个问题似乎与 Drupal 无关。
与Drupal有关。这是一个 Drupal 站点，自 6.x 以来 JQuery 是 Drupal 核心的一部分，这是关于 Drupal 行为的。
这个问题显然与 Drupal 有关，并且处理“页面已加载”事件的 Drupal 方式不是通常的 jQuery 方式（参见业余咖啡师的回答）。请把它移回 Drupal Answer。

标签： jquery drupal-7

【解决方案1】：

为了在您想要的所有内容完全加载后执行脚本：

$(window).load(function(){
  alert('hello');
});

jQuery.ready() 在 DOM 准备好后立即执行，这通常是在外部资源加载之前。

【讨论】：

执行此操作的“Drupal 方式”是使用 Drupal 行为，此示例是一种不好的做法。请阅读drupal.org/node/756722中的行为部分。
我正在使用 Drupal 行为（这就是我在 Drupal Stack Exchange 上提交此问题的原因），但实际上我的问题实际上与缺少的窗口加载有关。
不要 1) 使用 $ 而不将其包装在外部上下文中，2) 使用 jQuery(window).load(...) 但使用 Drupal.behaviors。请参阅业余咖啡师答案中的链接。
@mongolito404 你能解释一下你所说的 1 是什么意思吗？是否与避免命名空间冲突有关？
是的，这是为了避免命名空间冲突。在 Drupal 7 中，jQuery 以兼容模式初始化，因此 $ 不是 jQuery 对象，请参阅drupal.org/update/modules/6/7#javascript_compatibility。所有这些都记录在drupal.org/node/756722。

【解决方案2】：

阅读 Drupal 7 JavaScript API here。您想关注行为部分。行为与您在示例中尝试做的事情相同，但是，当 Drupal 页面加载时，它所做的第一件事就是实例化 Drupal 对象。这个对象被每个具有行为和属性的模块扩展。当您在准备好文档时使用 Drupal 行为而不是标准 JQuery 时，您可以在 JavaScript 函数中访问其他模块定义的所有属性和方法。

这些教程（1、2）适用于 Drupal 6，但它们可以很好地解释和了解 Drupal 的行为。

【讨论】：

OP 要求在加载外部资源（此处为 CSS）后运行 JavaScript 的方法。行为在这里没有帮助。由于 OP 还使用 jQuery(document).ready 作为非工作代码的示例，因此这个答案仍然是相关的。