[JS] problema innerHTML

treled · Messaggio da **treled** » mercoledì 23 aprile 2014, 16:31

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.

Messaggio da **Zoff** » giovedì 24 aprile 2014, 0:32

Usare <p> o <div> non cambia nulla.
Che problemi incontri?
Inoltre, che cosa contiene la variabile files?

treled · Messaggio da **treled** » giovedì 24 aprile 2014, 12:33

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.

Messaggio da **Zoff** » giovedì 24 aprile 2014, 12:39

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/

treled · Messaggio da **treled** » giovedì 24 aprile 2014, 13:00

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.

Messaggio da **Zoff** » giovedì 24 aprile 2014, 13:12

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.

treled · Messaggio da **treled** » giovedì 24 aprile 2014, 13:41

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.

Messaggio da **Zoff** » giovedì 24 aprile 2014, 13:44

Aggiungi sotto a:

Codice: Seleziona tutto

loading.innerHTML = "Loading " + percent + "%";

questo:

Codice: Seleziona tutto

console.log( loading.innerHTML);

Così puoi vedere nella console del browser l'avanzamento

treled · Messaggio da **treled** » giovedì 24 aprile 2014, 14:13

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.

Messaggio da **Zoff** » giovedì 24 aprile 2014, 14:16

le immagini non hanno un evento loadeddata.

treled · Messaggio da **treled** » giovedì 24 aprile 2014, 14:18

Zoff [url=http://forum.ubuntu-it.org/viewtopic.php?p=4569892#p4569892][img]http://forum.ubuntu-it.org/images/icons/icona-cita.gif[/img][/url] ha scritto:le immagini non hanno un evento loadeddata.

quindi ? come posso fare?
aggiungere un'altro file.addEventListener("loadeddata", function() {

cambiando l'loadeddata ?

hai link o come fare?.

grazie mille.

treled · Messaggio da **treled** » giovedì 24 aprile 2014, 14:33

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?

treled · Messaggio da **treled** » giovedì 24 aprile 2014, 14:39

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>

Forum Ubuntu-it

[JS] problema innerHTML

[JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Re: [JS] problema innerHTML

Chi c’è in linea

Accedi • Iscriviti