如何使脚本执行等到加载 jquery

javascript jquery

2022-08-30 04:45:33

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

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

情况...asp.net 母版页和子页。

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

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

母版页页眉。
子页面内容块 1（位于母版页的头部内，但在调用母版页脚本之后）。
子页面内容块 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();
    });

});

答案 1

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

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

它将每 50 毫秒以递归方式调用一次 deferrer 方法，直到存在该方法时它退出并调用window.jQuerymethod()

具有匿名函数的示例：

defer(function () {
    alert("jQuery is now loaded");
});

答案 2

最简单，最安全的方法是使用如下方法：

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

        // place your code here.

        clearInterval(waitForJQuery);
    }
}, 10);