Pagina 1 di 1
[JS] problema innerHTML
Inviato: mercoledì 23 aprile 2014, 16:31
da treled
Salve, come posso fare questo pezzo di codice invece di usare il <p id="loading"> metterlo in un div ovvero <div id="loading">?
Codice: Seleziona tutto
var counter = 0;
var start = document.getElementById("start"),
loading = document.getElementById("loading");
function preload(files)
{
for(var i = 0; i < files.length; i++) {
var file = files[i];
file.addEventListener("loadeddata", function() {
counter++;
var percent = Math.floor((counter/files.length)*100);
loading.innerHTML = "<img src='img/load.png' title='loading'>Loading " + percent + "%";
if(percent == 100) showButton();
});
}
}
preload(files);
function showButton() {
start.style.top = "30%";
loading.style.top = "100%";
}
l'html è cosi:
Codice: Seleziona tutto
<!DOCTYPE html>
<html>
<head>
<title>Ping Pong</title>
<script type="text/javascript" src="js/requestAnimationFrame.js"></script>
<link rel="stylesheet" type="text/css" href="framework.css">
<link rel="stylesheet" type="text/css" href="pong.css">
<script type="text/javascript" src="lib.js"></script>
</head>
<body>
<canvas id="game" width="800" height="600"></canvas>
<div id="menu">
<h1>Ping Pong</h1>
<a href="javascript: void(0)" id="start" onclick="init()" >Start</a>
<div id="loading"></div>
</div>
<script type="text/javascript" src="prova.js"></script>
</body>
</html>
idee?
grazie mille e buona giornata.
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 0:32
da Zoff
Usare <p> o <div> non cambia nulla.
Che problemi incontri?
Inoltre, che cosa contiene la variabile files?
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 12:33
da treled
ciao, avevo già provato ma solamente che dopo che ha finito di caricare i file audio, non leva la dicitura "Loading 100%" invece l'immagine si.
ecco a te la variabile files:
Codice: Seleziona tutto
var pong_click = loadAudio('media/pong/pong_click.mp3');
var pong_hit = loadAudio("media/pong/pong_hit.mp3");
var mainMusic = loadAudio("media/pong/psy.mp3");
var files = [pong_click, pong_hit, mainMusic];
var counter = 0;
var start = document.getElementById("start"),
loading = document.getElementById("loading");
function preload(files)
{
for(var i = 0; i < files.length; i++) {
var file = files[i];
file.addEventListener("loadeddata", function() {
counter++;
var percent = Math.floor((counter/files.length)*100);
loading.innerHTML = "Loading " + percent + "%";
if(percent == 100) showButton();
});
}
}
preload(files);
function showButton() {
start.style.top = "30%";
loading.style.top = "100%";
}
il codice di loadaudio è questo:
Codice: Seleziona tutto
// [AudioName] Audio file name
function loadAudio(audioName)
{
// create new audio object
var audio = new Audio();
// load audio
audio.src = audioName;
// return audio object
return audio;
}
ho scritto in inglese i commenti perché dicono di scriverli sempre in inglese se voi che lo usano le altre persone fuori dal'italia.
e l'html è diventato cosi:
Codice: Seleziona tutto
<div id="menu">
<h1>Ping Pong</h1>
<a href="javascript: void(0)" id="start" onclick="init()" >Start</a>
<div id="loading"><img src="img/load.png"></div>
</div>
idee? e come faccio a testare il preload perché si che funziona .. ma lo devo sempre caricare online e caricare un file da 10mb per far che mi fa vedere il preload .. il problema che ho fastweb da 10mbps.
idee?
grazie mille.
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 12:39
da Zoff
E dov'è che gli dici di "eliminare la dicitura"?
Se in show button nascondo l'elemento del caricamento a me funziona:
http://jsfiddle.net/P4XxE/2/
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 13:00
da treled
guarda l'esempio del preload lo preso da qui:
http://cssdeck.com/labs/classic-snake-g ... ml5-canvas
se ti interessa,
ma io ho modificato alcune cose.
ciao, ti ho scritto un pm.
saluti a dopo.
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 13:12
da Zoff
Nel tuo caso devi toglierlo manualmente, mettere top:100% non rimuove l'elemento dall'area visibile.
Nell'esempio sopra ti ho fatto vedere un modo.
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 13:41
da treled
ok, quasi fatto .. l'unico non riesco ad testarlo essendo che mi carica veloce la pagina da 66% va subito a 100% e dopo scompare.
idee? ,
Provo con il cellulare e poi ti faccio sapere se ho risolto..
ti ringrazio molto.
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 13:44
da Zoff
Aggiungi sotto a:
questo:
Così puoi vedere nella console del browser l'avanzamento
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 14:13
da treled
fatto, ora ho ridotto un po il codice,
ma l'unico che non so il motivo perché se metto l'immagine si inchioda a 75%.
ti incollo il codice modificato:
Codice: Seleziona tutto
var background = loadSprite('media/pong/pong.png');
etc..
]var files = [background, pong_click, pong_hit, mainMusic];
function preload(files)
{
var counter = 0;
var start = document.getElementById("start"),
loading = document.getElementById("loading");
for(var i = 0; i < files.length; i++) {
var file = files[i];
file.addEventListener("loadeddata", function() {
counter++;
var percent = Math.floor((counter/files.length)*100);
loading.innerHTML = '<img src="img/load.png"><br />Loading :' + percent + '';
console.log(loading.innerHTML);
if(percent == 100)
{
start.style.top = "30%";
loading.style.display = "none";
}
});
}
}
preload(files);
questo è loadSprite..
non cambia nulla affatto che invece dell'audio carica l'immagine..
ecco:
Codice: Seleziona tutto
// [imageName] image file name
function loadSprite(imageName)
{
// create new image object
var image = new Image();
// load image
image.src = imageName;
// return image object
return image;
}
ti ringrazio moltissimo..
buona giornata.
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 14:16
da Zoff
le immagini non hanno un evento loadeddata.
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 14:18
da treled
quindi ? come posso fare?
aggiungere un'altro file.addEventListener("loadeddata", function() {
cambiando l'loadeddata ?
hai link o come fare?.
grazie mille.
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 14:33
da treled
ho fatto cosi:
Codice: Seleziona tutto
<!doctype html>
<html>
<head>
<meta char="utf-8">
</head>
<body>
<script>
var imagesLoaded = 0;
var images = ['media/pong.png', 'media/pong.png', 'media/pong.png'];
for(var i=0; i < images.length; i++){
imagesLoaded++;
if(imagesLoaded === images.length){
console.log(imagesLoaded);
window.alert('done loading');
}
}
</script>
</body>
</html>
perendo idea da qui:
http://www.reddit.com/r/learnprogramming/comments/1xrf6j/html5javascript_canvas_hell_and_image_preloading/
l'unico che nella console.log mi segnala un 3.
come faccio ad integrarlo nel mio?
Re: [JS] problema innerHTML
Inviato: giovedì 24 aprile 2014, 14:39
da treled
quasi fatto.. ma come lo metto insieme al mio di sopra?
Codice: Seleziona tutto
<!doctype html>
<html>
<head>
<meta char="utf-8">
</head>
<body>
<div id="loading"></div>
<script>
var imagesLoaded = 0;
loading = document.getElementById("loading");
var images = ['media/pong.png', 'media/pong1.png', 'media/pong2.png'];
for(var i=0; i < images.length; i++){
imagesLoaded++;
var percent = Math.floor((imagesLoaded/images.length)*100);
if(imagesLoaded === images.length){
loading.innerHTML = '<img src="img/load.png"><br />Loading :' + percent + '';
console.log(loading.innerHTML);
if(percent == 100)
{
loading.style.display = "none";
}
}
}
</script>
</body>
</html>