2
我發現這個site/tutorial/demo來自SO上的另一個問題。腳本不能在localhost工作
非常漂亮和乾淨的代碼。但是，當我從本地主機運行測試所有更改到我的網站時，我遇到了問題。我正在運行幾乎完全相同的代碼（我的所有代碼都在/ lib not/js中）。
我已經瀏覽了FireBug中的代碼並檢查了生成的源代碼，它添加了腳本標記，但加載函數的斷點從不觸發。
要測試文件是否正在加載和未註冊，我加載jquery和在標準$(document).ready()函數有一個簡單的警報，但FireBug給出的錯誤$ is not defined這意味着，雖然loading.js更新HTML文件，瀏覽器（FireFox，但IE8表現出相同的行爲）不加載文件。
更新：我已啓用Net選項卡。當頁面被重新加載（通過ctrl + f5）有9個請求，其中8個是304和404（這是調用加載的logo.png，我從來沒有複製），其餘的是ColorBox的CSS文件。列出的對象都不是應通過正在加載的loading.js文件加載的js文件。所有的時間都在毫秒級，沒有什麼比普通的要好。
UPDATE2：這裏的源：
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>yensdesign.com - How to create a stylish loading bar as Gmail in jQuery</title>
<link rel="stylesheet" href="css/loading.css" type="text/css" media="screen" />
<script src="lib/loading.js" type="text/javascript"></script>
</head>
<body onload="start()">
<div id="restart">
<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
<div id="button" onclick="restart()"><input type="submit" value="Restart me please!" /></div>
</div>
<div id="loadingZone">
<div id="loadingSms">LOADING</div>
<div id="infoProgress">0%</div>
<br class="clear" />
<div id="loadingBar">
<div id="progressBar"> </div>
</div>
<div id="infoLoading"></div>
</div>
</body>
</html>
注意從general.css在名稱更改爲loading.css。這是loading.css，它除了名稱的變化與general.css相同外：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
font-size: 12px;
font-family:tahoma,arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
.clear{
clear:both;
}
#button{
text-align:center;
margin:50px 50px 150px 50px;
}
#restart{
display:none;
text-align:center;
}
#loadingZone{
margin:0 auto;
width:410px;
text-align:center;
}
#loadingBar{
border:1px solid #c2c2c2;
height:2px;
text-align:left;
line-height:0;
margin:0;
padding:0;
overflow:hidden; /*fix for IE 6*/
}
#progressBar{
height:2px;
line-height:0;
margin:0;
padding:0;
background:#b3f83d;
width:0%;
}
#loadingSms{
color:#6ea1fa;
float:left;
padding:10px 2px;
}
#infoProgress{
color:#6ea1fa;
float:right;
padding:10px 2px;
}
#infoLoading{
padding:10px;
color:#b9b9b9;
font-size:10px;
}
最後是loading.js。請注意，添加了該腳本標記的行的更改已被修改以反映我的目錄佈局。
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: [email protected]
//@license: Feel free to use it, but keep this credits please!
/***************************/
var LoadBar = function(){
this.value = 0;
this.sources = Array();
this.sourcesDB = Array();
this.totalFiles = 0;
this.loadedFiles = 0;
};
//Show the loading bar interface
LoadBar.prototype.show = function() {
this.locate();
document.getElementById("loadingZone").style.display = "block";
};
//Hide the loading bar interface
LoadBar.prototype.hide = function() {
document.getElementById("loadingZone").style.display = "none";
};
//Add all scripts to the DOM
LoadBar.prototype.run = function(){
this.show();
var i;
for (i=0; i<this.sourcesDB.length; i++){
var source = this.sourcesDB[i];
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = source
head.appendChild(script);
}
};
//Center in the screen remember it from old tutorials? ;)
LoadBar.prototype.locate = function(){
var loadingZone = document.getElementById("loadingZone");
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = loadingZone.clientHeight;
var popupWidth = loadingZone.clientWidth;
loadingZone.style.position = "absolute";
loadingZone.style.top = parseInt(windowHeight/2-popupHeight/2) + "px";
loadingZone.style.left = parseInt(windowWidth/2-popupWidth/2) + "px";
};
//Set the value position of the bar (Only 0-100 values are allowed)
LoadBar.prototype.setValue = function(value){
if(value >= 0 && value <= 100){
document.getElementById("progressBar").style.width = value + "%";
document.getElementById("infoProgress").innerHTML = parseInt(value) + "%";
}
};
//Set the bottom text value
LoadBar.prototype.setAction = function(action){
document.getElementById("infoLoading").innerHTML = action;
};
//Add the specified script to the list
LoadBar.prototype.addScript = function(source){
this.totalFiles++;
this.sources[source] = source;
this.sourcesDB.push(source);
};
//Called when a script is loaded. Increment the progress value and check if all files are loaded
LoadBar.prototype.loaded = function(file) {
this.loadedFiles++;
delete this.sources[file];
var pc = (this.loadedFiles * 100)/this.totalFiles;
this.setValue(pc);
this.setAction(file + " loaded");
//Are all files loaded?
if(this.loadedFiles == this.totalFiles){
setTimeout("myBar.hide()",300);
//load the reset button to try one more time!
document.getElementById("restart").style.display = "block";
}
};
//Global var to reference from other scripts
var myBar = new LoadBar();
//Checking resize window to recenter :)
window.onresize = function(){
myBar.locate();
};
//Called on body load
start = function() {
myBar.addScript("lib/jquery-min.js");
myBar.addScript("lib/jquery.colorbox-min.js");
myBar.addScript("lib/jquery.pan-min.js");
myBar.addScript("lib/raphael-min.js");
myBar.addScript("lib/map.js");
myBar.run();
};
//Called on click reset button
restart = function(){
window.location.reload();
};
任何想法，如何使一個腳本，可以在線工作在本地主機工作？或者一個類似的方法來做一個在localhost中工作的加載屏幕？
你的意思是一個在本地主機上運行的網站，或者你打開本地文件？如果您遇到Firebug問題，可以嘗試使用Fiddler（請參閱http://www.fiddler2.com/fiddler2/）。 – Oleg 2010-09-25 21:19:33
這是一個在本地主機上運行的網站（通過Apache 2.0.39）。 – 2010-09-25 21:32:30
只是通過將所有文件複製到我的本地Web服務器（包括'jsfile [1-8] .js'）*和*添加一個警報到一個被包含的.js文件，它可以正常工作。 – 2010-09-25 21:35:32