JQuery:延迟加载JQuery和'$未定义'

JQuery: Deferred loading of JQuery and '$ not defined'

本文关键字：JQuery 未定义 延迟加载      更新时间：2023-09-26

我无法理解这个问题以及我在网上发现的大量信息：

在我的项目中，JQuery加载了"defer"。这一点我不能因为项目标准而改变。

<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>

现在我需要在页面中添加一些小函数(目前是内联的(：

使用此设置，浏览器将尝试在jQuery加载=>"Uncaught ReferenceError:$is not defined"之前执行内联scrip

<body>
...
...
<script>
  $("#city").change(function() {...some stuff...};
  $("#doctor").change(function() {...some stuff...};
</script>
</body>

解决这个问题的明智方法是什么？

将其封装在window.onload中，因此只有在所有内容都已完全加载时才会执行脚本。

试试这个例子：

window.onload = function () {
    $("#city").click(function() {
        alert('city');
    });
    $("#doctor").click(function() {
        alert('doctor');
    });
}
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<button id="city">City</button>
<button id="doctor">Doctor</button>

MDN:关于window.onload的解释

加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像、脚本、链接和子帧都已完成加载。

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

要获得更惯用的(在jquery中(方式，请使用下面的代码。与CCD_ 3相同。

$(document).ready(function() {
    // put code here
});

另一种选择是使用$(function() { })。

$(function() {
    // put code here
})

优点：使用这种方法，您不必等待"加载"事件触发。。一旦jQuery完成加载，就应该立即执行此操作。

var initInterval = setInterval(function(){
        if(window.jQuery) {
            clearInterval(initInterval);
            init(); // where init is the entry point for your code execution
        }
    }, 20);
function init(){
  $('#example').text('Ahoy!');
}
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<div id="example">Hi</div>

通过这种方式，您可以向window.load:添加多个函数

window.addEventListener("load",function(event) {
    $("#city").click(function() {
        alert('city');
    });
},false);
window.addEventListener("load",function(){
    $("#doctor").click(function() {
        alert('doctor');
    });
},false);
相关文章：