如何使脚本执行等到加载jquery [英] How to make script execution wait until jquery is loaded
问题描述
我遇到的问题是页面加载速度如此之快，以至于jquery在后续脚本调用之前尚未完成加载。有没有办法检查是否存在jquery，如果它不存在，请稍等片刻然后再试一次？
I am having a problem where the page is loading so fast, that jquery hasn't finished loading before it is being called by a subsequent script. Is there a way to check for the existence of jquery and if it doesn't exist, wait for a moment and then try again?
在回答下面的答案/评论时，我发布了一些标记。
In response to the answers/comments below, I am posting some of the markup.
情况...... asp.net母版页和子页面。
The situation... asp.net masterpage and childpage.
在母版页中，我引用了jquery。
然后在内容页面中，我引用了特定于页面的脚本。
当加载特定于页面的脚本时，它会抱怨$ is undefined。
In the masterpage, I have a reference to jquery. Then in the content page, I have a reference to the page-specific script. When the page specific script is being loaded, it complains that "$ is undefined".
我在警报的几个点放置警报以查看订单事情正在解雇，并确认它按此顺序触发：
I put alerts at several points in the markup to see the order in which things were firing, and confirmed that it fires in this order:
- 主页面标题。
- 子页面内容块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：
Then in the body of the masterpage, there is an additional ContentPlaceHolder:
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
在子页面中，它看起来像这样：
In the child page, it looks like so:
<%@ 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文件的内容：
Here is the content of the "../Script/Dashboard.js" file:
$(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();
});
});
推荐答案
编辑
你能为脚本标签尝试正确的类型吗？
我看到你使用 text / Scripts ，这不是javascript的正确mimetype。
Could you try the correct type for your script tags?
I see you use text/Scripts, which is not the right mimetype for javascript.
使用这个：
<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 ，它是您的javascript代码的加载程序。
or you could take a look at require.js which is a loader for your javascript code.
取决于你的项目，这可能有点矫枉过正
depending on your project, this could however be a bit overkill
这篇关于如何使脚本执行等到加载jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
