加载 jQuery 后如何运行 jQuery 函数？

Question

在我的网站上，我正在异步加载 jQuery。

为了做到这一点，我必须在真正加载之后才运行 jQuery 函数。

我尝试了两种纯 JS 方式：

<script src="js/jquery-2.2.2.min.js" async></script>
<script>
    window.addEventListener('load', function() {
        //stuff
    }, true);
</script>

和

window.onload = function() {
    //stuff
}

但即便如此，我仍然得到Uncaught TypeError: $(...) is not a function at...

库完全加载后如何触发 jQuery 函数？

Answer 1

只有在使用脚本标签加载 jQuery 库后，您才需要添加脚本。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> // your code should be here alert(typeof jQuery) </script>

---

文档就绪处理程序仅在加载 DOM 元素后用于执行代码。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> console.log('Outside document ready handler ' + $('.test').length) $(document).ready(function() { console.log('Inside document ready handler ' + $('.test').length) }); </script> <div class="test"></div>

---

更新 1：如果脚本在文件中，您可以使用defer ，请参阅以下问题： jquery loaded async and ready function not working

---

更新 2：或者您可以使用addEventListener方法将load事件处理程序绑定到脚本标记。

 <script async id="script" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> document.getElementById('script') .addEventListener('load', function() { alert(typeof jQuery) }); </script>

仅供参考：我不知道您为什么要这样做，为了优化内容加载的速度，最好将脚本标签移动到body末尾，这有助于首先加载内容。

Answer 2

你可以这样做：

function checkVariable(){
   if ( window.jQuery){
      Do your jquery stuff here
   }
   else{
      window.setTimeout("checkVariable();",100);
   }
}
checkVariable();

为格式化道歉......现在卡在我的手机上。

Answer 3

我没有看到列出的这个方法，所以我想我会使用JavaScript HTML DOM EventListener来演示。

示例 #1 使用jQuery.ready()方法：

 <p id="test-jquery">jQuery Not Loaded</p> <script> $(document).ready(function() { var elem = $('#test-jquery'); elem.text('jQuery Is Loaded'); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

由于尚未加载jQuery ，此方法将不起作用。 运行上面的例子会输出：

ERROR: {
  "message": "ReferenceError: $ is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 13,
  "colno": 3
}

示例 #2 使用addEventListener()方法：

 <p id="test-jquery">jQuery Not Loaded</p> <script> window.addEventListener('DOMContentLoaded', function() { var elem = $('#test-jquery'); elem.text('jQuery Is Loaded'); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

由于我们正在侦听Window DOMContentLoaded 事件，因此该方法将起作用。

来自Mozilla ：

此事件的原始目标是已加载的Document 。 您可以在 Window 接口上侦听此事件，以便在捕获或冒泡阶段进行处理。 有关此事件的完整详细信息，请参阅文档页面： DOMContentLoaded事件。

一个不同的事件load应该只用于检测完全加载的页面。 在 DOMContentLoaded 更合适的地方使用 load 是一个常见的错误。

Answer 4

使用document.ready或在标题中加载库。 那应该可以。确保加载到正确的文件夹或正确的链接中。 如果您使用链接来加载 jquery，请确保有 Internet 连接

Answer 5

你可以使用这个：

<script>
    document.addEventListener('readystatechange', event => {
        if (event.target.readyState === "complete") {
            // window loaded, external resources are loaded too...
            jQuery(function($) {
                // your code here: $("a").css(...)
            }
        }
    });
</script>

当内联 jQuery 脚本在 safari（Mac 和 iOS）上不起作用时，我使用了它，这解决了问题。