Søg
Avatar billede theselfimages Nybegynder
04. august 2004 - 11:21 Der er 9 kommentarer og
1 løsning

Preloader der loader internt

Kan man lave en Preloader til loading af GIF, JPG billeder, der loader internt i en HTML fil. Dvs. en preloader der IKKE ved loaddone gør følgende:

var locationAfterPreload = "../content.htm" // URL of the page after preload finishes

Men i stedet viser body indhold når siden er loaded.
Altså lave noget med "DIV Hidden", der skjuler sidens indhold, mens der preloades?
Avatar billede nikolajdu Nybegynder
04. august 2004 - 12:28 #1
sårn i den her dur?

    <script type="text/javascript">
function show(){
document.getElementById("myBody").style.visibility = "visible";
}
onload = show;

</script>
</head>

<body>

<div id="myBody" style="visibility:hidden">hej hej</div>
Avatar billede roenving Novice
04. august 2004 - 12:28 #2
Sådan noget ?-)

http://www.eksperten.dk/spm/409629
Avatar billede theselfimages Nybegynder
04. august 2004 - 23:02 #3
Kunne man ikke udbygge nedenstående script (fra: http://www.eksperten.dk/spm/409629) til at det rent faktisk realtime preloader billederne, og indikerer med counter eller progressbar at den gør dette? I stedet for at lidt falske timeOut funktion?

N.B.
Jeg har tidligere benyttet dette preloadscript:
http://test2.theselfimages.dk/preloader.htm


<script type="text/javascript" language="javascript">
var imgs = new Array();
imgs[0] = new Image();
imgs[0].src = "../billede.jpg";
imgs[1] = new Image();
imgs[1].src = "../billede.jpg";
imgs[2] = new Image();
imgs[2].src = "../billede.jpg";
imgs[3] = new Image();
imgs[3].src = "../billede.jpg";
imgs[4] = new Image();
imgs[4].src = "../billede.jpg";
function checkImgs(){
    for(i=0;imgs.length>i;i++){
        if(!imgs[i].complete)setTimeout('checkImgs()',200)
    }
    displaySiden();
}
</script>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="checkImgs()">

<span id="loading" style="display:block;">
<script language="javascript" type="text/javascript">
function displaySiden(){
if(document.all){l=document.all['loading'];s=document.all['siden'];
}else if(document.getElementById){l=document.getElementById('loading');s=document.getElementById('siden');}
l.style.display = 'none'; s.style.display = 'block';}
</script>

<!-- Her indsættes billede eller tekst, som fortæller at siden loades -->
Loading ...
</span>

<div id="siden" style="display:none;">
<!-- Hele siden indsættes i denne DIV -->
</div>

</body>
</html>
Avatar billede roenving Novice
05. august 2004 - 00:02 #4
Prøv at kigge på phoenixvs: http://www.phoenixv.dk/arkiv.html under Billeder (http://www.phoenixv.dk/scripts/scr02.html)

-- skulle lige til at lave næsten det samme nummer, som han laver i koden, men den dybe tallerken er jo opfundet !-)

-- så sætter du baren ind i loading-span'en, og i stedet for at preloade et antal billeder, tygger du på antallet af billeder i document.images arrayet !-)
Avatar billede theselfimages Nybegynder
05. august 2004 - 03:06 #5
Vil du venligst vise, hvordan det samlet ser ud flettet sammen med koden fra ovenstående script?
Avatar billede theselfimages Nybegynder
06. august 2004 - 18:00 #6
?

Altså hvordan nedenstående script + http://www.phoenixv.dk/scripts/scr02.html
- vil se ud samlet..
Avatar billede roenving Novice
10. august 2004 - 12:07 #7
Som du vil kunne se, er det absolut utestet !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Avanceret preloader</title>
<script type="text/javascript">
bill = new Array("billede1.jpg", "billede2.jpg", "billede3.jpg", "billede4.jpg", "billede5.jpg"); //Billederne. Listen kan sagtens forstørres/formindskes.

i = -1;
nsImg = new Image();
tbts = 0;

function preload() {
  img = (document.all) ? document.images["pimg"] : nsImg;
  if (++i != 0 && document.all)
    tbts += Math.round(img.fileSize / 1024);
  prct = Math.round(i / bill.length * 100);
  document.getElementById("pl").innerHTML = prct + "%<br />" + ((document.all) ? "Kilobytes: " + tbts + "<br />" : "") + i + " ud af " + bill.length + " billeder loadet";
  document.getElementById("plbar").style.width = prct + "%";
  if (i >= bill.length)
    efterPreload();
  else {
    img.src = bill[i];
    if (!document.all)
      tjek();
  }
}

function tjek() {
  if (nsImg.complete)
    preload();
  else
    setTimeout(tjek, 100);
}

function efterPreload() {
  if(document.getElementById){
    l=document.getElementById('loading');s=document.getElementById('siden');
  }else if(document.all){
    l=document.all['loading'];s=document.all['siden'];}
  l.style.display = 'none'; s.style.display = 'block';
}
</script>
</head>
<body>
<div id="loading">
<div style="width: 200px; height: 16px; border: 1px solid black; background-color: #CCCCCC; font-size: 0px;">
<div style="width: 0%; height: 100%; background-color: #6699CC; font-size: 0px;" id="plbar"></div>
</div>
<span id="pl" style="font-family: Verdana; font-size: 60%;"></span><br />
<img src="" name="pimg" style="display: none;" onLoad="preload();" />
</div>

<div id="siden" style="display:none;">
<!-- Hele siden indsættes i denne DIV -->
</div>
<script type="text/javascript">
preload();
</script>
</body>
</html>
Avatar billede theselfimages Nybegynder
18. august 2004 - 13:10 #8
Roenving =>
Det virker perfekt.
Post er svar!
Avatar billede roenving Novice
18. august 2004 - 13:18 #9
Velbekomme '-)
Avatar billede roenving Novice
18. august 2004 - 13:32 #10
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 12:15 morf bilede Af knuldefar1942 i Fri debat
I går 22:13 Gemme største værdi Af Lemming@privat.dk i Excel
I går 21:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »