su: precaricamento immagini

**pietro09** · 29-03-2006, 13:51

se ho un codice del genere

codice:

		img[0] = newImage("C:\\tmp\\img000.jpg");
		img[1] = newImage("C:\\tmp\\img001.jpg");
		img[2] = newImage("C:\\tmp\\img002.jpg");
		img[3] = newImage("C:\\tmp\\img003.jpg");
		img[4] = newImage("C:\\tmp\\img004.jpg");
		
		preloadFlag = true;

la variabile preloadFlag, viene valorizzata subito o solo dopo l'importazione delle immagini? :master:

non posso verificarlo perchè con le immagini che ho al momento, sul mio computer non noto ritardi

**fcaldera** · 29-03-2006, 14:19

difficile dirlo... qual è il codice della funzione newImage() ???

**pietro09** · 29-03-2006, 14:21

questa è la paginetta di prova:

codice:

<!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">
<head>
	<title>Untitled Page</title>

	<script language="javascript" type="text/javascript">
// <!CDATA[

function window_onload() 
{
	document.getElementById("TextArea1").value = preloadFlag;
	preloadImages();
	document.getElementById("TextArea1").value += "\n" + preloadFlag;
}


var preloadFlag = false;
var img = [];
function preloadImages() 
{
	if (document.images) 
	{
		img[0] = newImage("C:\\tmp\\img000.jpg");
		img[1] = newImage("C:\\tmp\\img001.jpg");
		img[2] = newImage("C:\\tmp\\img002.jpg");
		img[3] = newImage("C:\\tmp\\img003.jpg");
		img[4] = newImage("C:\\tmp\\img004.jpg");
		
		preloadFlag = true;
	}
}

function newImage(arg) 
{
	if (document.images) 
	{
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages(id_img, src) 
{
	if (document.images && (preloadFlag == true)) 
	{
		document.getElementById(id_img).src = src;
	}
}

// ]]>
	</script>

	<style type="text/css">
	span 
	{
		background-color:Green;
		color:White;
		padding-left:10px;
		padding-right:10px;
		cursor:default;
	}
	</style>
</head>
<body onload="return window_onload()">
	<span onmouseover="changeImages('img1', img[0].src);">1</span> 
	<span onmouseover="changeImages('img1', img[1].src);">2</span> 
	<span onmouseover="changeImages('img1', img[2].src);">3</span> 
	<span onmouseover="changeImages('img1', img[3].src);">4</span> 
	<span onmouseover="changeImages('img1', img[4].src);">5</span>
	

	

	[img][/img]
	<textarea id="TextArea1" cols="20" rows="10"></textarea>
</body>
</html>

**pietro09** · 29-03-2006, 15:13

questa versione sembra funzionare (IE6, Opera8, Firefox 1.5)
Certo è che mi sembra ampollosa :master: . Cosa ne pensate?

codice:

<!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">
<head>
	<title>Untitled Page</title>

	<script language="javascript" type="text/javascript">
// <!CDATA[

function window_onload() 
{
	document.getElementById("TextArea1").value = preloadFlag();
	preloadImages();
	window.setTimeout("controlla_stato()", 10);
}
function controlla_stato()
{
	if (!preloadFlag())
		window.setTimeout("controlla_stato()", 10);
	else
		document.getElementById("TextArea1").value += "\n" + preloadFlag();	
}

function preloadFlag()
{
	return imgload[0] && imgload[1] && imgload[2] && imgload[3] && imgload[4];
}

var img = [], imgload = [false, false, false, false, false];
function preloadImages() 
{
	if (document.images) 
	{
		img[0] = newImage("img000.jpg"); img[0].onload = function(){imgload[0] = true;}
		img[1] = newImage("img001.jpg"); img[1].onload = function(){imgload[1] = true;}
		img[2] = newImage("img002.jpg"); img[2].onload = function(){imgload[2] = true;}
		img[3] = newImage("img003.jpg"); img[3].onload = function(){imgload[3] = true;}
		img[4] = newImage("img004.jpg"); img[4].onload = function(){imgload[4] = true;}
		
		
	}
}

function newImage(arg) 
{
	if (document.images) 
	{
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages(id_img, src) 
{
	if (document.images && (preloadFlag() == true)) 
	{
		document.getElementById(id_img).src = src;
	}
}

// ]]>
	</script>

	<style type="text/css">
	span 
	{
		background-color:Green;
		color:White;
		padding-left:10px;
		padding-right:10px;
		cursor:default;
	}
	</style>
</head>
<body onload="return window_onload()">
	<span onmouseover="changeImages('img1', img[0].src);">1</span> 
	<span onmouseover="changeImages('img1', img[1].src);">2</span> 
	<span onmouseover="changeImages('img1', img[2].src);">3</span> 
	<span onmouseover="changeImages('img1', img[3].src);">4</span> 
	<span onmouseover="changeImages('img1', img[4].src);">5</span>
	

	

	[img][/img]
	<textarea id="TextArea1" cols="20" rows="10"></textarea>
</body>
</html>

Discussione: su: precaricamento immagini

Strumenti discussione

Ricerca discussione

Visualizza

su: precaricamento immagini

Permessi di invio