Question

我在SO上找到了另一个问题site/tutorial/demo。

非常漂亮和干净的代码。但是当我从localhost运行时，我遇到了问题，我测试了对我网站的所有更改。我正在运行完全相同的代码（我的所有我的/ lib不是/ js）。

我已经逐步完成了FireBug中的代码并检查了生成的源代码并添加了脚本标记，但是加载函数上的断点永远不会触发。

为了测试文件是否正在加载而未注册，我正在加载jquery并且在标准$(document).ready()函数中有一个简单的警报，但FireBug给出的错误为$ is not defined，这意味着加载时。 js更新html文件，浏览器（FireFox，但IE8表现出相同的行为）没有加载文件。

更新：我已启用网络标签。当页面被重新加载时（通过 ctrl + f5 ），有9个请求，其中8个是304和404（这是对load 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">&nbsp;</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: yensamg@gmail.com
//@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中工作？或者类似的方法来做一个在localhost中工作的加载屏幕？

Answer 1

没有看到代码，我猜你正在从文件系统运行页面，而javascript路径指向根目录，类似于/example.js

您确实应该使用Firebug的NET选项卡来诊断文件是否未加载，如果文件显示为灰色，已禁用，您应该可以使用“Net”标题旁边的向下箭头，并启用它

Answer 2

你说你把代码移到/ lib而不是/ js。您是否更改了代码以反映这一点？它在第34行硬编码，假设文件在那里：script.src = "js/" + source。此外，如果禁用了firebug net选项卡，请单击选项卡，旁边会显示一个箭头。单击该箭头并选择启用。

编辑以响应更新：

我在我的localhost上设置了它，我发现了两件事。首先，这个脚本似乎有点作弊。它加载的每个脚本都必须调用“已加载”函数来通知加载器已完成加载，因此如果您希望进度条工作，您将必须编辑包含的所有脚本以调用该函数对。除此之外，它实际上是加载所有文件。在firebug命令行中，$返回一个函数，该函数是jquery.min.js文件的一部分，因此它正在加载文件。

你说你在$(document).ready发了警告。根据您放置的位置，您会收到错误。如果在load.js加载jQuery之前运行该脚本，那么您将收到错误。我不太清楚为什么你想要或需要一个javascript加载器，特别是因为它会让你更难以做到这一点，但如果你想在加载完成后使用jQuery，你可能想要把所有的jQuery依赖代码在另一个脚本中并使用loading.js加载。我尝试了这个，它工作正常。

Answer 3

好的，似乎我没有完全阅读所有教程。看来我需要修改它将加载的文件以包含对加载脚本的回调。如果我从CDN加载文件或想要预加载images / css，则无用。

抱歉浪费你的时间。

脚本无法在localhost中运行

3 个答案: