javascript - Javascript preloader fejl? - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

<< < 1 2 > >>

Bruger #11328 @ 20.02.08 17:22

1.323

Hej allesammen!

jeg har lavet mig en lille simpel preloader der ser sådan ud:

Kode

<html>

<head>

<script type="text/javascript">
function preload()
{
  billede = document.getElementById("billede");
  i = 0;
  if(billede.complete)
  {
    document.getElementById("text").style.display="";
    billede.style.display="block";
  }
  else
  {
  if(i==0)
  {
    document.getElementById("text").innerHTML="Billedet loader.";
    i++;
    preload();
  }
  else if(i==1)
  {
    document.getElementById("text").innerHTML="Billedet loader..";
    i++;
    preload();
  }
  else if(i==2)
  {
    document.getElementById("text").innerHTML="Billedet loader...";
    i++;
    preload();
  }
  else
  {
    i = 0;
  }

  }
}
</script>
</head>
<body onload="preload()">
<div id="text" style="display: block;"></div>
<img src="billede.bmp" id="billede" alt="Test billede" style="display: none;" />
</body>

</html>

Det vriker dog ikke efter hensigten, det eneste der sker er at billedet bliver vist så snart det loader...
Har med vilje valgt et MEGET grafiktungt billede, så det kan ikke være det at man bare ikke når at se det...

Håber i kan hjælpe!

Bruger #8773 @ 20.02.08 22:23

658

Det er fordi du smider den i body'en onload.. Dvs. at når siden er loaded helt, går den i gang - altså en onload funktion går først igang når siden er fuldt loadet, så den kan du desværre ikke bruge på den måde, til gændgæld kan du måske lave noget med at siden er sløret eller noget i forvejen, og så bliver den clear on load?
Sådan noget lavede jeg en gang

Se evt. hvordan det virker her: http://www.rosmi.dk/wux/default.asp

Indlæg senest redigeret d. 20.02.2008 22:24 af Bruger #8773

Bruger #11328 @ 21.02.08 01:29

1.323

Kan du ikke lige give en forklaring af:
propertien: '.complete' Og er det muligt at bruge den?
muligheden 'obj = new Image();

Ideen er at jeg loader billederne før siden vises. Hvordan?!

Bruger #8773 @ 21.02.08 11:50

658

Det er netop det jeg lige sagde..

Du skal lave en div i bunden af din BODY, som er stor nok til at dække hele siden (går ud fra en side på 1000px x 800px), og så skal du have en main-holder, som er en div til at holde hele din side. Det hele skal se ca. sådan her ud:

Kode

<body>
<div id="maintable" class="Table_01" style="filter:Alpha(opacity=30, style=0); -moz-opacity:0.3; z-index:1; position:absolute;">
HER HAR DU BODY INDHOLD, BILLEDER OSV. INGEN INDHOLD UDEN FOR DENNE DIV!!!
</div>
<div id="bloker" style=" display:block; top:0; left:0; width:1000px; height:800px; z-index:3; position:absolute; background-image:url(jpg/spacer.gif);"></div>
</body>

spacer.gif er bare en gennemsigtigt 1x1px gif fil.

Så skal du have en javascript kode, som du placerer i din HEAD eller en ekstern fil, som bliver inkluderet i HEAD som ser sådan ud:

Kode

//**LOADING**\\\function loading(){
	setTimeout("loadingdone()", 2000);
}
function loadingdone(){
	document.getElementById("maintable").style.filter='none';
	document.getElementById("maintable").style.MozOpacity='1';
	document.getElementById("bloker").style.display="none";
}

Her finder vi de 2 elementer: bloker og maintable.
bloker er det der ligesom går ind og blokerer for siden, så man ikke kan bruge menuer osv. når man kommer ind på siden, maintable er din main-holder, som indeholder alt indhold til siden.
Det javascript koden gør er, at fjerne noget fra din style, så den ikke længere er halv-gennemsigtig, og grunden til at der er 2 er, at det ene er til Firefox, den anden til IE.
derefter fjerner vi "bloker" så man kan trykke igen.

Sidst, men absolut ikke mindst, skal vi jo lige huske at fjerne vores "loading" screen når siden er færdig med at loade.
Til det har vi body onload="". Her kalder du javscript funktionen "loading();"

En samlet kode vil se ca. sådan ud:

Kode

<html>
<head>
<script type="text/javascript">
<!--
//**LOADING**\\\function loading(){
	setTimeout("loadingdone()", 2000);
}
function loadingdone(){
	document.getElementById("maintable").style.filter='none';
	document.getElementById("maintable").style.MozOpacity='1';
	document.getElementById("bloker").style.display="none";
}
-->
</script>
</head>
<body onload="loading();">
<div id="maintable" class="Table_01" style="filter:Alpha(opacity=30, style=0); -moz-opacity:0.3; z-index:1; position:absolute;">
HER HAR DU BODY INDHOLD, BILLEDER OSV. INGEN INDHOLD UDEN FOR DENNE DIV!!!
</div>
<div id="bloker" style=" display:block; top:0; left:0; width:1000px; height:800px; z-index:3; position:absolute; background-image:url(jpg/spacer.gif);"></div>
</body>

Håber du forstår det bedre nu

Bruger #11328 @ 21.02.08 13:13

1.323

Har forstået det der... og det kan jeg også godt selv, jeg tror ikke du forstod:

Kan du ikke lige give en forklaring af:
propertien: '.complete' Og er det muligt at bruge den?
muligheden 'obj = new Image();

Bruger #8773 @ 21.02.08 21:26

658

complete udskriver en boolean verdi ( enten 1 og 0 eller true og false ) alt efter om det er loaded eller ej

Bruger #11328 @ 22.02.08 11:28

1.323

Hmm. ja det virker bare ikke når jeg laver en preloader med det... den siger true ligemeget hvad....

Bruger #8773 @ 22.02.08 11:42

658

Måske er din internetforbindelse så hurtig, at den ikke registrerer det?

Jeg kan lige prøve at lege lidt med det, og se hvad jeg finder ud af

Bruger #8773 @ 22.02.08 11:52

658

Jeg har leget lidt med det nu - og har fået det til at virke.

Ved ikke om du kan se dig ud af koden her:

Kode

<html>
<head>
<script type="text/javascript">
<!--
function check(){
	if(document.images[0].complete == true){
		document.getElementById("complete").value = "Færdig";
	}else{
		document.getElementById("complete").value = "Loading";
	}
	setTimeout("check();",1);
}
setTimeout("check();",1);
-->
</script>
</head>

<body>
<img src="stort-billede.jpg"  />
<br />
<br />
<br />
<input type="text" value="" id="complete" />
</body>
</html>

Det der, kort fortalt, sker er, at den hele tiden (med et interval på 1/100 sekund) tjekker om billedet er færdig med at loade, og hvis det er det, udskriver den "færdig" hvis ikke udskriver den "loading"

Håber du forstår det nogenlunde.

Bruger #11328 @ 22.02.08 11:55

1.323

Hehe jo, jeg kan godt se det, og mange tak!

Bruger #11328 @ 22.02.08 12:36

1.323

Har lige lavet det her:

Kode

<html>
<head>
<script type="text/javascript">
<!--
var x = 0;
function check(){
  if(document.images[0].complete == true && document.images[1].complete == true && document.images[2].complete == true && document.images[3].complete == true && document.images[4].complete == true)
  {
    document.getElementById("loader").style.display="none";
    document.getElementById("side").style.display="";
  }
  else
  {
  if(x == 0)
  {
   setTimeout("loader();",1);
   x++;
   }
   else
   {
    setTimeout("loader();",500);
   }
  }
  setTimeout("check();",1);
}
setTimeout("check();",1);
var i = 0;
function loader()
{
  if(i == 0)
  {
    setTimeout('document.getElementById("loader").innerHTML="<h2>Loader</h2>"',1);
    i++;
    return;
  }
  else if(i == 1)
  {
    document.getElementById("loader").innerHTML="<h2>Loader.</h2>";
    i++;
    return;
  }
  else if(i == 2)
  {
    document.getElementById("loader").innerHTML="<h2>Loader..</h2>"
    i++;
    return;
  }
  else
  {
    document.getElementById("loader").innerHTML="<h2>Loader...</h2>"
    i = 0;
    return;
  }

}

-->
</script>
</head>

<body>
<div id="loader">
</div>
<div id="side" style="display: none">
<img src="Unavngivet.bmp" />
<img src="Unavngivet1.bmp" />
<img src="Unavngivet2.bmp" />
<img src="Unavngivet3.bmp" />
<img src="Unavngivet4.bmp" />
</div>
</body>
</html>

Det virker sådan set også ok, bortset fra at punktummerne efter loader går helt amok...

Kan du hjælpe?

<< < 1 2 > >>

Javascript preloader fejl?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler