Question

我有一个加载外部聊天脚本的网页，但是在我的所有CSS和jQuery启动之前加载脚本，所以我的页面看起来都搞砸了几秒钟。在页面完成加载后需要帮助确定如何启动聊天脚本...我认为可以通过将脚本添加到我的jQuery设置中来完成，但我不知道该怎么做。

这是代码，它不言自明，不熟悉实际的软件。

<script>
var online_text = "Chat Online Now";
var offline_text = "Chat Not Available";
var check_back = 1; // this lets the script check the operator status without being logged in
</script>
<script src="http://my.domain/chat/file.php"></script>

我认为会发生的事情是.php文件会使用必要的聊天链接编写我的在线或离线文本，这就是为什么我必须将脚本放在我想要显示聊天文本的位置。

希望这是有道理的...希望社区可以帮助我弄清楚如何解决问题。谢谢！

更新：这是我到目前为止的地方，不幸的是#chaticon元素是空的，即使我用简单的文本替换脚本。顺便使用jQuery 1.4.2：

$(document).load(function() { 
var online_text = 'Chat Online Now'; 
var offline_text = 'Chat Not Available'; 
var check_back = '1'; 
$("li#chaticon").html('<script type="text\/javascript" src="http:\/\/my.domain\/chat\/file.php"><\/script>');
});

Answer 1

使用JQuery函数$(document).ready()检查。

它将暂停运行，直到整个文档加载完毕并准备就绪。

Answer 2

之前提到的

$(document).ready() 只会等到DOM准备好进行操作（即，节点层次结构已完全构建）。但是，这不会等到任何其他资源（图像，样式表等）被加载，这听起来像你想要做的。

如果您需要先加载所有这些额外资源，请使用 $(document).load() 。这将等到所有其他资源都完成加载（因此页面将完全呈现）。

Answer 3

斯蒂芬

根据Dave关于将$(document).ready()函数放在页面上的建议，即：

$(document).ready(function() {
    var online_text = "Chat Online Now";
    var offline_text = "Chat Not Available";
    var check_back = 1;
    // do any other stuff here
});

另外，请确保js文件已加载到页面底部，就在结束</body>标记之前，并且css已加载到<head>标记中。这可能会或可能不会对上述问题进行排序，但在页面配置方面被认为是“良好做法”。

吉姆

Answer 4

感谢jmar777，我同意这里需要进行一些重新评估...聊天脚本是document.write，php / mysql和一些面向dom的东西的混合。不值得玩几个小时。

所以我最终将原始帖子中的代码放到PHP函数中并将其一直返回到页面顶部的变量，这样它的写入时间比写入的时间要早得多。在我的页面加载时飞行。我对我的CSS文件进行了一些小调整，以便在加载聊天脚本时看起来很奇怪的页面部分看起来不会像那样奇怪。

如何更改外部JavaScript的加载顺序

4 个答案: