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"> </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.
Vous devez vous connecter pour publier un commentaire.
Vous avez dit que vous avez déplacé votre code d' /lib au lieu de /js. Avez-vous de modifier le code afin de refléter ce? Son codé en dur sur la ligne 34 à assumer les fichiers sont là:
script.src = "js/" + source
. Aussi, si votre onglet réseau de firebug est désactivé, cliquez sur l'onglet et une flèche devrait s'afficher à côté d'elle. Cliquez sur la flèche et sélectionnez activer.Modifier en réponse à la mise à jour:
Je l'ai installé sur mon localhost et j'ai découvert 2 choses. Tout d'abord, ce script un peu de triche, il me semble. Chacun de ces scripts, il charge d'appeler la "chargé" de la fonction d'aviser le chargeur que le chargement a été effectué, donc vous allez avoir à modifier tous les scripts que vous inclure à appeler cette fonction si vous voulez que la barre de progression à l'œuvre. Cela mis à part, c'est en fait le chargement de tous les fichiers. Dans le pyromane de la ligne de commande, $ renvoie une fonction qui fait partie de la jquery.min.js fichier, c'est donc le chargement des fichiers.
Vous dit de vous mettre un message d'alerte dans
$(document).ready
. Selon l'endroit où vous mettez que, il est logique que vous obtiendrez une erreur. Si le script est exécuté avant loading.js chargement de jQuery, vous obtiendrez une erreur. Je ne suis pas tout à fait sûr de savoir pourquoi vous souhaitez ou avez besoin d'un javascript chargeur, surtout depuis que sa va rendre plus difficile sur vous pour le faire, mais si vous souhaitez utiliser jQuery après le chargement est terminé, vous pouvez mettre tous les jQuery charge de code dans un autre script et de la charge qu'avec l'loading.js. J'ai essayé et cela a fonctionné très bien.Sans voir le code, je devine que vous êtes en cours d'exécution de la page à partir de votre système de fichiers, et le javascript les chemins sont pointant vers le répertoire racine, quelque chose comme /example.js
Vous devez, en effet, utiliser l'onglet réseau de Firebug pour diagnostiquer si les fichiers ne sont pas en cours de chargement, si c'est grisé, son désactivé, vous devriez être en mesure de sur la flèche vers le bas à côté de la "Net" du titre, et l'activer.
<script src="lib/jquery-min.js" type="text/javascript">
et l'étiquette d'origine (qui s'est produite près de l'extrémité du corps) a été<script src="lib/jquery-min.js" type="text/javascript" charset="utf-8">
Bon, il semble que je n'ai pas très bien lire tout le tutoriel. Il semble j'ai besoin de modifier les fichiers, il sera de chargement pour contenir un rappel pour le chargement du script. Pas utile si je suis le chargement de fichiers à partir d'un CDN ou de vouloir précharger les images/css.
Désolé pour perdre votre temps les gars.