Archief - JS: preloaden van images

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
N

NaWaN

Legacy Member
Ik heb een probleempje, ik heb via photoshop een enkele pagina gemaakt waarin een fotoshow word 'tentoongesteld'. Ik heb dit gemaakt met photoshop en dit dan laten converteren in html taal.
Welnu heb ik deze online gezet en heb ik eerst gezien dat dit traag te voor schijn kwam. Ik dacht dus ga werken met een preloader.
Ik heb een tweede html pagina gemaakt met daarin een javascriptje die zorgt voor de preloadbar. En dan heb ik vanuit de originele html file (die door photoshop werd gemaakt) de preload-code bij de preloadpagina gezet. Hier zie ik wel dat photoshop enkel en alleen de fotos die door een mouse-over te voor schijn komen preload en ik wil er enkele aan toevoegen want is nog niet goed.
Nu na dit te doen zet ik alles terug online en bekijk het resultaat.
Op de pagina gekomen zie ik de preloader z'n werk doen maar nadat de preloadbalk weg is haalt hij de andere fotos maar van de server. Maar hij moet dat er niet na doen maar tijdens dat die preloadbalk z'n werk doet.

Kan iemand me helpen/zeggen wat ik verkeerd heb gedaan en/of dit op te lossen ???


In bijlage de code van de preloader + bijvoegsel van photoshop
Het volgende heb ik er nog es bijgezet om de andere fotos ook te preloaden.
Foto_1 --> Foto_28

Foto_1 = newImage("images/Foto-1.gif");
Klik om te vergroten...

PHP: 
<html>
<head>
<title>Preloader</title>

<script type="text/javascript">
<!--

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

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		Foto_1 = newImage("images/Foto-1.gif");
		Foto_2 = newImage("images/Foto-1.gif");
		Foto_3 = newImage("images/Foto-1.gif");
		Foto_4 = newImage("images/Foto-1.gif");
		Foto_5 = newImage("images/Foto-1.gif");
		Foto_6 = newImage("images/Foto-1.gif");
		Foto_7 = newImage("images/Foto-1.gif");
		Foto_8 = newImage("images/Foto-1.gif");
		Foto_9 = newImage("images/Foto-1.gif");
		Foto_10 = newImage("images/Foto-1.gif");
		Foto_11 = newImage("images/Foto-1.gif");
		Foto_12 = newImage("images/Foto-1.gif");
		Foto_13 = newImage("images/Foto-1.gif");
		Foto_14 = newImage("images/Foto-1.gif");
		Foto_15 = newImage("images/Foto-1.gif");
		Foto_16 = newImage("images/Foto-1.gif");
		Foto_17 = newImage("images/Foto-1.gif");
		Foto_18 = newImage("images/Foto-1.gif");
		Foto_19 = newImage("images/Foto-1.gif");
		Foto_20 = newImage("images/Foto-1.gif");
		Foto_21 = newImage("images/Foto-1.gif");
		Foto_22 = newImage("images/Foto-1.gif");
		Foto_23 = newImage("images/Foto-1.gif");
		Foto_24 = newImage("images/Foto-1.gif");
		Foto_25 = newImage("images/Foto-1.gif");
		Foto_26 = newImage("images/Foto-1.gif");
		Foto_27 = newImage("images/Foto-1.gif");
		Foto_28 = newImage("images/Foto-1.gif");
		MainFotos_Foto_1_over = newImage("images/MainFotos-Foto-1_over.gif");
		MainFotos_Foto_2_over = newImage("images/MainFotos-Foto-2_over.gif");
		MainFotos_Foto_3_over = newImage("images/MainFotos-Foto-3_over.gif");
		MainFotos_Foto_4_over = newImage("images/MainFotos-Foto-4_over.gif");
		MainFotos_Foto_5_over = newImage("images/MainFotos-Foto-5_over.gif");
		MainFotos_Foto_6_over = newImage("images/MainFotos-Foto-6_over.gif");
		MainFotos_Foto_7_over = newImage("images/MainFotos-Foto-7_over.gif");
		MainFotos_Foto_8_over = newImage("images/MainFotos-Foto-8_over.gif");
		MainFotos_Foto_9_over = newImage("images/MainFotos-Foto-9_over.gif");
		MainFotos_Foto_10_over = newImage("images/MainFotos-Foto-10_over.gif");
		MainFotos_Foto_11_over = newImage("images/MainFotos-Foto-11_over.gif");
		MainFotos_Foto_12_over = newImage("images/MainFotos-Foto-12_over.gif");
		MainFotos_Foto_13_over = newImage("images/MainFotos-Foto-13_over.gif");
		MainFotos_Foto_14_over = newImage("images/MainFotos-Foto-14_over.gif");
		MainFotos_Foto_28_over = newImage("images/MainFotos-Foto-28_over.gif");
		MainFotos_Foto_27_over = newImage("images/MainFotos-Foto-27_over.gif");
		MainFotos_Foto_26_over = newImage("images/MainFotos-Foto-26_over.gif");
		MainFotos_Foto_25_over = newImage("images/MainFotos-Foto-25_over.gif");
		MainFotos_Foto_24_over = newImage("images/MainFotos-Foto-24_over.gif");
		MainFotos_Foto_23_over = newImage("images/MainFotos-Foto-23_over.gif");
		MainFotos_Foto_22_over = newImage("images/MainFotos-Foto-22_over.gif");
		MainFotos_Foto_21_over = newImage("images/MainFotos-Foto-21_over.gif");
		MainFotos_Foto_20_over = newImage("images/MainFotos-Foto-20_over.gif");
		MainFotos_Foto_19_over = newImage("images/MainFotos-Foto-19_over.gif");
		MainFotos_Foto_18_over = newImage("images/MainFotos-Foto-18_over.gif");
		MainFotos_Foto_17_over = newImage("images/MainFotos-Foto-17_over.gif");
		MainFotos_Foto_16_over = newImage("images/MainFotos-Foto-16_over.gif");
		MainFotos_Foto_15_over = newImage("images/MainFotos-Foto-15_over.gif");
		preloadFlag = true;
	}
}

// -->
</script>
<!-- End Preload Script -->
</head>

<body bgcolor="#F1F1F1" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">

<script>
getal=0;
url='Fotos.html';
function load()
{
if(getal==100)
{
window.location=url;
}
else {
getal+=2;
tabel.width=getal;
text.innerHTML=getal+"%";
setTimeout("load()","100");
}
}
setTimeout("load()","100");
</script><br><br><br><br><br><br><br><br><br><br><br>
<div align="center">
Loading...
<div id=text></div>
<table cellpadding="0" cellspacing="0" width="102" style="border:1 solid black">
<tr><td align="left">
<table cellpadding="0" cellspacing="0" bgcolor=#0000CC height="11" id=tabel>
<tr><td></tr></td></table></tr></td></table>
</div>

</body>

</html>
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan