Question

我有一个动态加载jQuery的脚本，方法是将其插入<head>元素：

 // pseudo code

 headElelement.insertBefore(script, firstChild);

然而，在那次调用之后，我立即开始使用jQuery，但那时它是未定义的。怎么可能？

Answer 1

那是因为jQuery尚未完全加载。您可能需要在加载jQuery之后执行jQuery代码，方法是将事件处理程序附加到动态创建的脚本元素的onload事件中，如下所示。

script.onload = function() {
    // Put your jQuery code here.
    console.log(jQuery);
};

支持IE8及以下旧版浏览器的跨浏览器解决方案：

script.onload = script.onreadystatechange = function(event) {
    event = event || window.event;
    if (event.type === "load" || (/loaded|complete/.test(script.readyState))) {
        script.onload = script.onreadystatechange = null;
        // Put your jQuery code here.
        console.log(jQuery);
    }
};

Answer 2

如果您发布相关代码会更容易;-)但无论如何，这是一种可能的方法：

<html>
<head>
  <script type="text/javascript" src="path_to_js/jquery.js"></script>
  <script type="text/javascript" src="path_to_js/your_js_code.js"></script>
  ...
</head>...

并在你的文件your_js_code.js中：

... /* All your modules and functions here */

/* DOM loading ready */
$(document).ready(function () {
  call_your_methods_here();
});

顺便说一下，通常最好在HTML中<body>的最末端加载JS文件，这样HTML首先开始显示，用户＆＃34;看到＆＃34;你的页面更快，而JS代码仍在加载。

在script元素中动态添加jquery后，jquery不可见

2 个答案: