Le Script ne fonctionne pas en localhost

J'ai trouvé ce site/tutoriel/démo à partir d'une autre question, ici, sur DONC.

Très agréable et propre code. Cependant, je vais avoir des problèmes avec elle lors de l'exécution à partir de localhost où j'ai tester toutes les modifications apportées à mes sites. Je suis en cours d'exécution assez bien exactement le même code (j'ai tout le miens dans /lib n'est pas /js).

J'ai franchi le code dans FireBug et inspecté la source générée et c'est d'ajouter les balises de script, mais un point d'arrêt sur l'chargés jamais déclenche.

Pour tester si les fichiers sont en cours de chargement et n'est pas enregistré, je suis le chargement de jquery et dans la norme $(document).ready() fonction d'une simple alerte, mais FireBug donne l'erreur de $ is not defined ce qui signifie que tout loading.js met à jour le fichier html, le navigateur (FireFox, mais IE8 présente le même comportement) n'est pas le chargement des fichiers.

Mise à JOUR: j'ai activé l'onglet Net. Lorsque la page est dur reloaded (via ctrl+f5) il y a 9 demandes, 8 qui est 304 et 404 (qui est l'appel à charger logo.png que je n'ai jamais copié), le reste sont ColorBox fichiers css. Aucun des objets répertoriés sont des fichiers js qui doivent être chargés via le loading.js fichier qui est en cours de chargement. Toutes les heures sont en bas millisecondes et rien ne semble sortir de l'ordinaire.

UPDATE2: Voici la source:

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

Remarque le changement de nom de général.css pour le chargement.css. C'est le chargement.css qui, outre le changement de nom est identique au général.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;
}

Et enfin loading.js. Remarque les modifications apportées à la ligne ce qui ajoute de la crée la balise script a été modifié afin de refléter mon annuaire de mise en page.

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

Toutes les idées de comment faire un script qui simplement les œuvres de travail en ligne en localhost? Ou une méthode similaire pour faire un écran de chargement qui ne fonctionne pas en localhost?

  • Entendez-vous un Site Web qui est en cours d'exécution sur l'hôte local ou vous ouvrir les fichiers locaux? Si vous avez un problème avec Firebug, vous pouvez essayer avec un violon (voir fiddler2.com/fiddler2).
  • C'est un Site Web qui est en cours d'exécution dans le localhost (via Apache 2.0.39).
  • Juste essayé moi-même en copiant tous les fichiers de mon serveur web local (y compris jsfile[1-8].js) et l'ajout d'une alerte à un être inclus .fichier js et elle fonctionne correctement.
  • Pourquoi ne pas nous coller un code au lieu de laisser les gens deviner?
  • Mis à jour avec le code source.
InformationsquelleAutor graham.reeds | 2010-09-25