JS defer和jQuery ready事件

qf9go6mv 于 2023-04-20 发布在 jQuery

关注(0)|答案(5)|浏览(92)

我已经添加了defer属性到我的jquery脚本，以提高网页性能，但现在我得到错误$ is not defined。我需要执行JS代码时，页面加载，所以我使用jQuery.ready事件，但它不工作时，使用defer。

<head>    
    <script defer="defer" src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
          //MyLoadCode
        });
    </script>

</head>

jquery

来源：https://stackoverflow.com/questions/13045194/js-defer-and-jquery-ready-event

5条答案

按热度按时间

cxfofazt1#

defer属性，如果存在的话，指定脚本在页面完成解析时执行。但是你在页面完成解析之前使用了jquery变量$，并且在那个时候jquery脚本没有加载，也没有初始化$。
不使用defer属性，而是将script-tags从页眉移到页面底部，正好在</body>标签之前。

<html>
    <head></head>
    <body>

        ... 

        <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function () {
              //MyLoadCode
            });
        </script>
    </body>
</html>

赞(0）回复(0）举报 2023-04-20

zour9fqk2#

如果你不想让脚本加载到很晚，那么就把jquery脚本移到html页面的底部，这样它就会最后加载。

赞(0）回复(0）举报 2023-04-20

nkkqxpd93#

您需要确保在使用$之前加载了jQuery，因此不应延迟加载jQuery。
如果你想延迟加载jQuery，你需要将使用jQuery的javascript添加到脚本onload成功事件处理程序中。

赞(0）回复(0）举报 2023-04-20

q3qa4bjr4#

你不能使用$(document).ready(function () {和等待单元的DOM已经加载，因为这个语句是一个jQuery符号，它是被延迟的，还不可用。所以，$变量只能在jQuery立即加载时使用。

赞(0）回复(0）举报 2023-04-20

gudnpqoy5#

一般来说，使用显式回调比使用轮询更简洁，但是使用defer加载脚本的优点使得对setTimeout()的简单调用值得。

<head>
   <script defer src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
   <script>
      const myApp = () => {
         console.log('Page ready:', $('h1').text());
         console.log('My app is running.');
         };
   </script>
   <script>
      const onReady = () =>
         typeof $ === 'function' ? $(myApp) : setTimeout(onReady, 100);
      onReady();
   </script>
</head>

typeof命令检查是否加载了jQuery。如果没有，等待100毫秒并再次检查。（注意，对于setTimeout()，每个对onReady()的调用都是独立的，因此没有 * 递归调用堆栈 * 溢出。）
此轮询策略并不特定于jQuery。
您可以使用此策略来等待任何库：

<script>
   const onReady = () =>
      typeof xLib !== 'undefined' ? myApp() : setTimeout(onReady, 100);
   window.addEventListener('DOMContentLoaded', onReady);
</script>

外部JS文件

或者，您可以利用defer脚本保证按顺序执行的事实，但这需要将您的代码放在单独的文件中。
在代码之前加载所需的库：

<head>
   <script defer src=https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js></script>
   <script defer src=my-app.js></script>
</head>

赞(0）回复(0）举报 2023-04-20

我来回答

JS defer和jQuery ready事件

5条答案

相关问题

热门标签

最新问答