Fatal编程技术网
  • javascript/
  • Javascript 脚本在本地主机中不工作

Javascript 脚本在本地主机中不工作

javascript

Javascript 脚本在本地主机中不工作,javascript,localhost,Javascript,Localhost,我从这里的另一个问题中发现了这一点 非常好和干净的代码。然而，当我从localhost运行时，我遇到了问题，在那里我测试了对我的站点的所有更改。我运行的代码几乎完全相同（我的代码都在/lib而不是/js中） 我已经在FireBug中浏览了代码并检查了生成的源代码，它正在添加脚本标记，但是加载的函数上的断点从未触发 为了测试文件是否正在加载和未注册，我正在加载jquery和标准的$（document）.ready（）函数中有一个简单的警报，但FireBug给出了$未定义的错误，这意味着加载.js更

我从这里的另一个问题中发现了这一点

非常好和干净的代码。然而，当我从localhost运行时，我遇到了问题，在那里我测试了对我的站点的所有更改。我运行的代码几乎完全相同（我的代码都在/lib而不是/js中）

我已经在FireBug中浏览了代码并检查了生成的源代码，它正在添加脚本标记，但是加载的函数上的断点从未触发

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

更新：我已启用“网络”选项卡。当硬加载页面时（通过ctrl+f5），有9个请求，其中8个是304，一个是404（这是加载logo.png的调用，我从未复制过），其余的是ColorBox css文件。列出的对象都不是应该通过正在加载的loading.js文件加载的js文件。所有的时间都是以毫秒为单位的，没有什么不寻常的

更新2:以下是来源：


<!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>


最后加载.js。请注意，添加creates-the-script标记的行的更改已被修改，以反映我的目录布局


/***************************/
//@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();
}; 



/***************************/
//@作者：阿德里安·延斯·马托·冈德尔和伊万·瓜尔达多·卡斯特罗
//@网站：www.yensdesign.com
//@电邮：yensamg@gmail.com
//@许可证：请随意使用，但请保留此信用证！
/***************************/
var LoadBar=函数（）{
该值=0；
this.sources=Array（）；
this.sourcesDB=Array（）；
this.totalFiles=0；
this.loadedFiles=0；
};
//显示加载栏界面
LoadBar.prototype.show=函数（）{
这个。locate（）；
document.getElementById（“loadingZone”）.style.display=“block”；
};
//隐藏加载栏界面
LoadBar.prototype.hide=函数（）{
document.getElementById（“loadingZone”）.style.display=“无”；
};
//将所有脚本添加到DOM
LoadBar.prototype.run=函数（）{
this.show（）；
var i；

对于（i=0；i=0&&value，如果没有看到代码，我猜您正在从文件系统运行页面，javascript路径指向根目录，类似于/example.js


您确实应该使用Firebug的NET选项卡来诊断文件是否未加载，如果文件变灰、被禁用，您应该能够在“NET”旁边的向下箭头上标题，并启用它。
您说您将代码移到了/lib而不是/js。您是否更改了代码以反映这一点？它在第34行硬编码以假定文件存在：
script.src=“js/”+source
。此外，如果您的firebug net选项卡被禁用，请单击该选项卡，旁边会显示一个箭头。单击该箭头并选择启用

编辑以响应更新：

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


您说您在
$（文档）中放置了警报.ready
。根据您放置的位置，可能会出现错误。如果在Load.js加载jQuery之前运行该脚本，则会出现错误。我不太确定您为什么想要或需要javascript加载程序，特别是因为这会使您更难执行此操作，但如果您想在加载后使用jQueryg已完成，您可能希望将所有依赖于jQuery的代码放在另一个脚本中，并使用loading.js加载。我尝试了这个方法，效果很好。
好的，看来我没有完全阅读所有教程。似乎我需要修改它将加载的文件，以包含对加载脚本的回调。如果我加载f来自CDN或希望预加载图像/css的文件


很抱歉浪费了你们的时间。
你们是指在本地主机上运行的网站还是打开本地文件？如果您对Firebug有问题，可以尝试使用Fiddler（请参阅）。这是一个在本地主机上运行的网站（通过Apache 2.0.39）。只需将所有文件复制到本地Web服务器（包括
jsfile[1-8]）.js
）并向一个要包含的.js文件添加一个警报，它可以正常工作。我们为什么不粘贴一些代码而不是让人们猜测呢？用源代码更新。js文件指向正确的位置。生成的源位置是
和原始标记（发生在正文末尾附近）was
更新了查看网络选项卡的结果的答案（这意味着什么也不说）。是的，我这样做了（因此“我运行的代码几乎完全相同”）行。我将看到FireBug在启用网络选项卡时说了些什么。更新了查看网络选项卡的结果的答案（这意味着什么也不说）是的，我也发现了。原因是我有很多东西需要加载才能让web应用正常工作（jquery、raphael、我自己的代码加上一些ajax请求），我希望在加载过程中有一个加载屏幕，而不是一个空白屏幕或一个旋转的弹跳器。

/***************************/
//@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();
};