如何让脚本执行等待 jquery 加载完成

IT技术 javascript jquery
2021-03-02 04:09:22

我遇到了页面加载速度如此之快的问题，以至于 jquery 在被后续脚本调用之前还没有完成加载。有没有办法检查jquery是否存在，如果不存在，请稍等片刻，然后再试一次？

为了回应下面的答案/评论，我发布了一些标记。

情况... asp.net masterpage 和 childpage。

在母版页中，我引用了 jquery。然后在内容页面中，我引用了特定于页面的脚本。当加载页面特定脚本时，它会抱怨“$ 未定义”。

我在标记中的几个点放置警报以查看事物触发的顺序，并确认它按以下顺序触发：

  1. 母版页标题。
  2. 子页面内容块 1（位于母版页的头部内，但在母版页脚本被调用之后）。
  3. 子页面内容块 2。

这是母版页顶部的标记：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Reporting Portal</title>
    <link href="~/Styles/site.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/red/red.css" rel="stylesheet" type="text/css" />
    <script type="text/Scripts" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/Scripts" language="javascript" src="../Scripts/jquery.dropdownPlain.js"></script>
    <script type="text/Scripts" language="javascript" src="../Scripts/facebox.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

然后在母版页的正文中，还有一个额外的 ContentPlaceHolder：

 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>

在子页面中，它看起来像这样：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="Data.Dashboard" %>
<%@ Register src="../userControls/ucDropdownMenu.ascx" tagname="ucDropdownMenu" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" type="text/css" href="../Styles/paserMap.css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
***CONTENT HERE***
    <script src="../Scripts/Dashboard.js" type="text/javascript"></script>
</asp:Content>

这是“../Script/Dashboard.js”文件的内容：

    $(document).ready(function () {

    $('.tgl:first').show(); // Show the first div

    //Description: East panel parent tab navigation
    $('.tabNav label').click(function () {
        $('.tabNav li').removeClass('active')
        $(this).parent().addClass('active');

        var index = $(this).parent('li').index();
        var divToggle = $('.ui-layout-content').children('div.tgl');

        //hide all subToggle divs
        divToggle.hide();
        divToggle.eq(index).show();
    });

});
6个回答

迟到了，类似于 Briguy37 的问题，但为了将来参考，我使用以下方法并传入我想推迟到 jQuery 加载的函数：

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() { defer(method) }, 50);
    }
}

它将每 50 毫秒递归调用一次 defer 方法，直到window.jQuery存在时它退出并调用method()

一个匿名函数的例子：

defer(function () {
    alert("jQuery is now loaded");
});
如果库由于某种原因没有加载，是否有堆栈溢出的风险？
2021-04-17 04:09:22
@gidim 不会，因为它是计时器而不是循环。但只要用户停留在页面上，它就会一直运行。
2021-05-03 04:09:22
这是一个很好的解决方案，可以让一些自定义代码在由 Adob​​e Muse 中的其他人设计的站点中工作。
2021-05-11 04:09:22
最好调查脚本的加载顺序。我发现如果script加载 jQuery的标签有一个defer属性，它会导致问题，尽管代码定义了脚本的顺序，但直到以后才加载。
2021-05-13 04:09:22
这对我不起作用。在方法内部，没有定义 $ ......不知道为什么。
2021-05-15 04:09:22

最简单和最安全的方法是使用这样的东西：

var waitForJQuery = setInterval(function () {
    if (typeof $ != 'undefined') {

        // place your code here.

        clearInterval(waitForJQuery);
    }
}, 10);
除了 jquery 之外，这个优雅的解决方案也适用于其他 javascript 加载情况。感谢您分享这个！
2021-04-21 04:09:22
天才解决方案。谢谢
2021-05-11 04:09:22
通过演示是否可以将其编写为匿名函数，您将获得奖励积分。
2021-05-12 04:09:22

您可以使用 defer 属性在真正结束时加载脚本。

<script type='text/javascript' src='myscript.js' defer='defer'></script>

但通常以正确的顺序加载脚本应该可以解决问题，所以一定要在你自己的脚本之前放置 jquery 包含

如果您的代码在页面中而不是在单独的 js 文件中，那么您必须在文档准备好后才执行脚本，并且像这样封装您的代码应该也可以：

$(function(){
//here goes your code
});
只要你有一个依赖就可以了
2021-04-21 04:09:22

还有一种方法可以做到这一点，尽管 Darbio 的 defer 方法更灵活。

(function() {
  var nTimer = setInterval(function() {
    if (window.jQuery) {
      // Do something with jQuery
      clearInterval(nTimer);
    }
  }, 100);
})();

您可以尝试 onload 事件。当所有脚本都加载完毕时它会引发：

window.onload = function () {
   //jquery ready for use here
}

但请记住，您可以覆盖使用 window.onload 的其他脚本。

根据经验，这始终是我使用的最佳解决方案。
2021-04-18 04:09:22
@rogerdpack 同意，这是更好的解决方案。
2021-05-02 04:09:22
您可以添加事件侦听器以避免覆盖其他脚本：stackoverflow.com/a/15564394/32453 FWIW'
2021-05-03 04:09:22
这有效，但如果您的 jquery 更改页面的外观，您可能会看到一闪而过的无样式内容
2021-05-12 04:09:22
其它你可能感兴趣的问题
上一篇在组件状态下从数组中删除元素 下一篇使用 jQuery 获取文件输入的选定文件名而不带路径