我正在尝试将head.js的javascript加载程序部分与我的JQM网站集成。
我有几个问题：
以下是一些示例代码，用于说明每个问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Main Menu</title>
<!-- JQM CSS -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<!-- Custom Theme CSS -->
<link rel="stylesheet" href="themes/cayce.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css" />
<script src="js/head.load.min.js"></script>
<script>
head.js("http://code.jquery.com/jquery-1.8.2.min.js", "js/custom.js", "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js");
</script>
</head>
<body>
<div data-role="page" id="landing">
<div data-role="header">
<h1>Main Menu</h1>
<div class="header-sub">
<div class="logo">
<a href="WebCatPageServer.exe?Landing">
<img src="themes/images/logo.png" width="100" height="49" alt="Company Logo">
</a>
</div>
</div>
<!-- Search Bar-->
<div class="ui-body ui-body-b">
<fieldset>
<form name="Search" id="searchform" method="post" action="WebCatPageServer.exe">
<input name="Action" type="hidden" value="Search"/>
<input name="PrevSearchText" type="hidden" value="" />
<input name="Start" type="hidden" value="1" />
<input name="New" type="hidden" value="YES" />
<input name="Refine" type="hidden" value="NO" />
<label for="search-basic"></label>
<input type="search" name="Search Term" id="search-basic" placeholder="Enter Part #'s or Keywords" tabindex="1"/>
</form>
</fieldset>
</div><!-- /Search Bar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="SPI_TOCLink" data-theme="c">Browse Products</a></li>
<!-- SPI_HTML_ShowSearchMenu -->
<li><a href="SPI_SearchLink" id="SPI_CurrMenuSearch" data-prefetch>SPI_SearchMenuText</a></li>
<!-- SPI_HTML_ShowSearchMenu -->
<!-- SPI_HTML_AllowKits -->
<li><a href="SPI_KitsLink" data-theme="c" id="viewjobs" data-prefetch>View Jobs</a></li>
<!-- SPI_HTML_AllowKits -->
<!-- SPI_HTML_AllowOrderPlacement -->
<li><a href="SPI_ShopingCartLink" data-theme="c" data-prefetch>Shopping Cart</a></li>
<!-- SPI_HTML_AllowOrderPlacement -->
<!-- SPI_HTML_AllowSales -->
<li><a href="SPI_SalesLink" id="SPI_CurrMenuSales" data-prefetch>SPI_SalesMenuText</a></li>
<!-- SPI_HTML_AllowSales -->
<!-- SPI_HTML_ShowMyAccountMenu -->
<li><a href="SPI_MyAccountLink" data-theme="c" data-prefetch>SPI_MyAccountMenuText Dashboard</a></li>
<!-- SPI_HTML_ShowMyAccountMenu -->
<li><a href="SPI_LogoutLink">Logout</a></li>
</ul><!-- /listview -->
</div><!-- /Content-->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Login</title>
<!-- JQM CSS -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<!-- Custom Theme CSS -->
<link rel="stylesheet" href="themes/cayce.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css" />
</head>
<body>
<div data-role="page" id="login">
<div data-role="header">
<h1>Login</h1>
<div class="header-sub">
<div class="logo">
<a href="WebCatPageServer.exe?Landing">
<img src="themes/images/logo.png" width="100" height="49" alt="Company Logo">
</a>
</div>
</div>
</div>
<div data-role="content">
<div class="ui-bar text-center">
<p>Please enter your <strong>Username</strong> and <strong>Password</strong> below to log in to the SPI_Cname Mobile Web Store.</p>
</div>
<!-- SPI_HTML_UnknownLogin
<div class="ui-bar ui-bar-e text-center">
<br>
<h2>Please Try Again</h2>
<p>Either the Username or Password you entered doesn't match our records. Please try logging in again.</p>
</div>
<br>
SPI_HTML_UnknownLogin -->
<!-- SPI_HTML_ExpiredLogin
<div class="ui-bar ui-bar-e text-center">
<br>
<h2>Please Log In Again</h2>
<p>Either your session has expired or you logged in on another computer. Please log in again.</p>
</div>
<br>
SPI_HTML_ExpiredLogin -->
<!-- SPI_HTML_SessionLogout
<div class="ui-bar ui-bar-e text-center">
<br>
<h2>You've Logged Out.</h2>
<p>You have successfully logged out of SPI_Cname online.</p>
</div>
<br>
SPI_HTML_SessionLogout -->
<div class="ui-body ui-body-c">
<form name="Form" method="post" action="WebCatPageServer.exe">
<input name="Action" type="hidden" value="Login" class="hidden" />
<input name="Request" type="hidden" value="SPI_PageRequest" />
<div data-role="fieldcontain">
<label for="username">Username</label>
<input type="text" name="username" id="username" tabindex="1" value=""/>
</div>
<div data-role="fieldcontain">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" value=""/>
</div>
<div data-role="controlgroup" style="width:100%; text-align:center">
<input name="loginbutton" type="submit" data-theme="b" style="width:100%;" value="Sign In" tabindex="3"/>
</div>
</form>
</div><!-- /ui-body ui-body-c -->
<br>
<ul data-role="listview" data-inset="true">
<!-- SPI_HTML_GuestLogin
<li><a href="href="javascript:document.Form.Username.value='guest';document.Form.Password.value='guestpassword';document.Form.submit();">Guest Login</a></li>
SPI_HTML_GuestLogin -->
<li><a href="tel://SPI_CPNum">Call Us: SPI_CPNum</a></li>
<li><a href="WebCatPageServer.exe?Account_Request" id="accountrequest">Request Online Account</a></li>
</ul><!-- /listview -->
</div><!-- /content -->
<div data-role="footer">
</div><!-- /footer -->
<!-- Start headjs -->
<script src="js/head.load.min.js"></script>
<script>
head.js("http://code.jquery.com/jquery-1.8.2.min.js", "js/custom.js", "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js", function() {
$('#login').on('pageshow', function () {
$(':input:visible:enabled:first').focus();
});
});<!-- End headjs -->
</script>
</div><!-- /page -->
</body>
</html>
有几点需要注意：
谢谢！
答案 0 :(得分：0)
FOUC / FOUT是典型的框架，如jQuery Mobile＆amp; jQuery UI，因为它们在dom准备就绪后以编程方式应用样式。
尝试删除headJS，然后插入你的jquery＆amp;直接移动。如果没有区别，那只是因为它们是如何运作的。
如果您仍然看到FOUC / FOUT，请尝试查看一些框架，如320up，bootstrap＆amp;类似，因为它们是基于CSS的框架，而不是基于javascript的框架。
黄金法则通常是TOP上的CSS，BOTTOM中的JS