BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jqueryがロードされるまでスクリプトの実行を待たせる方法

2022-08-08 01:49:37

質問

ページの読み込みが速すぎて、後続のスクリプトから呼び出される前にjqueryの読み込みが終わらないという問題があります。 jqueryの存在を確認し、存在しない場合はしばらく待ってから再試行する方法はないでしょうか？

下記の回答・コメントにお応えして、マークアップの一部を掲載します。

状況...asp.netのマスターページと子ページです。

マスターページで、jqueryを参照しています。 そして、コンテンツページで、私はページ固有のスクリプトへの参照を持っています。 ページ固有のスクリプトが読み込まれるとき、それは "$ is undefined" と不平を言う。

マークアップのいくつかのポイントにアラートを置いて、発火する順番を確認し、この順番で発火することを確認しました。

  1. マスターページのヘッダー。
  2. 子ページのコンテンツブロック1 (マスターページのheadの中にある。 しかし，マスターページのスクリプトが呼び出された後である。 呼ばれた後)。
  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();
    });

});

どのように解決するのですか？

編集

scriptタグを正しいタイプに変更してみてください。 私はあなたが使用している参照してください text/Scripts を使用していますが、これはjavascriptのための正しいmimetypeではありません。

これを使います。 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="../Scripts/jquery.dropdownPlain.js"></script>
<script type="text/javascript" src="../Scripts/facebox.js"></script>

編集を終了する

または、次のものを見てください。 require.js を見てみてください。

プロジェクトによっては、これは少しやりすぎかもしれません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します