Søg
Avatar billede hoffe Nybegynder
15. april 2003 - 13:39 Der er 7 kommentarer og
3 løsninger

Loading af side

Hvordan laver man det sådan at en siden først viser sit indhold når hele siden er hentet ned. F.eks. hvis man går ind på www.bigbrother.dk så vises siden først når alle elementer er hentet ned.

Send mig gerne et komplet eks.

Takker
Avatar billede tobias_louv Nybegynder
15. april 2003 - 13:45 #1
bigbrother bruger PHP; men jeg tror jeg kan fikse det
Avatar billede tobias_louv Nybegynder
15. april 2003 - 13:46 #2
// index.html



// done.html

<html>
<head>
<title>Page Done</title>
</head>
<body>
<img src="a.gif">
<img src="b.gif">
<img src="c.gif">
<img src="d.gif">
<img src="e.gif">
<img src="f.gif">
<img src="g.gif">
<img src="h.gif">
<img src="i.gif">
<img src="j.gif">
<img src="k.gif">
<img src="l.gif">
<img src="m.gif">
<img src="n.gif"><BR><BR><BR>

I like dogs :)<BR>
<img src="dog1.jpg">
<img src="dog2.jpg">
<img src="dog3.jpg">
<img src="dog4.jpg">
<img src="dog5.jpg"><BR>

</body>
</html>
Avatar billede tobias_louv Nybegynder
15. april 2003 - 13:46 #3
jeg glemte index.html

<html>
<head>

<script>

var pics = new Array("dog1.jpg", "dog2.jpg", "dog3.jpg", "dog4.jpg", "dog5.jpg" ,"a.gif", "b.gif", "c.gif", "d.gif", "e.gif", "f.gif", "g.gif", "h.gif", "i.gif", "j.gif", "k.gif", "l.gif", "m.gif", "n.gif", "freefoto.gif");

var url = "done.html";

var doConfirm = true;

var canSkip = false;


var imgObjs = new Array(pics.length);
var loaded = 0;
var total = pics.length;
var cPercent = 0;

var barLayer = null;
var percentLayer = null;
var statLayer = null;
var doneMsgLayer = null;


function getLayer(layerID) {
if (document.getElementById)
    return document.getElementById(layerID);
else if (document.all)
    return document.all[layerID];
else
    return null;
}


function updateBar() {
statLayer.innerHTML = "<font face=\"Arial\" color=\"#FFFFFF\"><B>" +loaded+ "/" +total+ "</B></font>";
var percent = Math.round(loaded/total * 100);
if (cPercent != percent)
    {
    cPercent = percent;
    barLayer.style.width = (cPercent*3) +"px";
    percentLayer.innerHTML = "<font color=\"#BBBB00\"><B>" +cPercent+ "%</B></font>";
    }
if (loaded == total)
    {
    doneMsgLayer.innerHTML = "<a href=\"java script:done()\"><font face=\"Arial\" color=\"#FFCC00\" size=\"2\"><B>Done (Click Here)</B></font></a>";
    if (!doConfirm || (doConfirm && confirm("Files have finish loading, continue to next page?")))
        done();
    }
}




function startLoading() {
if (document.getElementById || document.all)
    {
    barLayer = getLayer("bar");
    percentLayer = getLayer("percent");
    statLayer = getLayer("stat");
    doneMsgLayer = getLayer("doneMsg");
    if (canSkip)
        doneMsgLayer.innerHTML = "<a href=\"java script:done()\"><font color=\"#FFCC00\" size=\"2\" face=\"Arial\">Skip Pre-Loading</font></a>";
    for (i=0; i<pics.length; i++)
        {
        imgObjs[i] = new Image();
        imgObjs[i].onload = imgLoaded;
        imgObjs[i].onerror = imgFailed;
        imgObjs[i].src = pics[i];
        }
    }
else
    {
    alert("You are likely running very old browser which is not compatible with preloading script.  Maybe it is time to update your browser.\n\nProgram is skipping preloading.");
    window.location.replace(url);
    }
}




function done() {
window.location.replace(url);
}



function imgFailed() {
alert("The following image failed to load, probably a broken link:\n" +this.src+ "\nPlease contact the webmaster of the site you are visiting about this.  The program will skip this file now.");
loaded++;
updateBar();
}

function imgLoaded() {
loaded++;
updateBar();
}



</script>
</head>

<body bgcolor="#002080" onLoad="startLoading()">

<div id="msg" style="position:absolute; top:0px; left:50px; width:200px; height:20px;"> <font face="Arial" size="4" color="#DDDDDD">Loading...</font></div>
<div id="bg" style="position:absolute; top:0px; left:200px; background-color: #DDDDDD; width:300px; height:20px;">&nbsp;</div>
<div id="bar" style="position:absolute; top:0px; left:200px; background-color: #000000; width:1px; height:20px;">&nbsp;</div>
<div id="percent" style="position:absolute; top:0px; left:330px;"><font color="#BBBB00"><B>0%</B></font></div>
<div id="stat" style="position:absolute; top:0px; left:520px;"><font face="Arial" color="#FFFFFF"><B>0/0</B></font></div>
<div id="doneMsg" style="position:absolute; top:0px; left:620px;"></div>


<div id="doneMatter" style="position:absolute; top:30px; left:0px; width:700px;">
<center><font color="#FFFFFF" face="Arial" size="2">Please wait while the computer preloads some files for you.</font></center><BR>

</body>
</html>
Avatar billede tobias_louv Nybegynder
15. april 2003 - 13:47 #4
Kan det bruges???
Avatar billede sqren Nybegynder
15. april 2003 - 13:50 #5
Er ikke helt 100%, men tror du først skal lave en preload side.

//preload
<head>
<SCRIPT>
function openwin() {
    document.location = "din_side.htm";
    return;
}
</SCRIPT>
</head>

<body <BODY onload="openwin()">
Avatar billede sqren Nybegynder
15. april 2003 - 13:51 #6
undskyld det skal ikke være
<body <BODY onload="openwin()">
Den rigtige er:
<BODY onload="openwin()">
</body>
Avatar billede pelkjaer Nybegynder
15. april 2003 - 13:53 #7
Læg et layer ind over siden, og skjul det ved load

http://peterelkjaer.dk/exp/test.html
Avatar billede sqren Nybegynder
15. april 2003 - 14:39 #8
Du kan også lave denne:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<script type="text/javascript" language="javascript">
<!--
//
var id = "fastsatID";
//

var popup = 0;
//

function openLink(url,feat){
 
  if(popup) {
      popup.close()
  }


  popup = window.open(url,id,feat);
  popup.focus();
}

// -->
</script>


<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
</head>

<body onLoad="document.all['loading'].style.display = 'none'; document.all['siden'].style.display = '';">
<span id="loading" style="display: ;">
<p align="right">

</p>

<BR><BR><BR>
<DIV STYLE="text-align:center">

<script language="JavaScript">
<!--
function random_imglink(){

var myimages=new Array()
myimages[1]="'http://www.animationer.dk/8/l/led1.gif' border='0'"
myimages[2]="'http://www.animationer.dk/8/l/led3.gif' border='1'"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<table height="200"><tr align=center><td valign=center><IMG SRC='+myimages[ry]+' ALIGN="bottom" border="0"></td></tr></table>Loading...')
}
random_imglink()
//-->
</script>

</DIV></span>
    <span id="siden" style="display: none">


<img src="http://babe12sjov.bravepages.com/images/caprice_bourret_016_tol.jpg">
</body>

</html>
Avatar billede sqren Nybegynder
16. april 2003 - 13:50 #9
<HTML>
<Head>
<script type="text/javascript" language="javascript">
<!--
//
var id = "fastsatID";
//

var popup = 0;
//

function openLink(url,feat){
 
  if(popup) {
      popup.close()
  }


  popup = window.open(url,id,feat);
  popup.focus();
}

// -->
</script>


<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
</Head>


<body onLoad="document.all['loading'].style.display = 'none'; document.all['siden'].style.display = '';">


<span id="loading" style="display: ;">
<p align="right">

</p>

<BR><BR><BR>
<DIV STYLE="text-align:center">

//dette er loading side
<script language="JavaScript">
<!--
function random_imglink(){

var myimages=new Array()
myimages[1]="'http://www.animationer.dk/8/u/ur10.gif' border='0'"
myimages[2]="'http://www.animationer.dk/8/u/ur10.gif' border='1'"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<table height="50"><tr align=center><td valign=center><IMG SRC='+myimages[ry]+' ALIGN="middle" border="0"></td></tr></table><br><font color="#000000">Loading...</font>')
}
random_imglink()
//-->
</script>

</DIV></span>
    <span id="siden" style="display: none">



//Så kan du sætte dit indhold her (alt det det står inde under dine body tags)


</body>
</HTML>
Avatar billede sqren Nybegynder
17. april 2003 - 12:52 #10
Tak for points
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 21/08/202610:41
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
IT-JOB

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Cyberdivisionen søger IT-supporterelever til lokal IT på Garderkasernen i Høvelte

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Teknologirådgiver inden for AI-området til Teknologiafdelingen

Capgemini Danmark A/S

Java Engineer

Capgemini Danmark A/S

AI Data Architect

Qpurpose ApS

Algorithmic Software Engineer (Python)
Seneste spørgsmål Seneste aktivitet
31/0810:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
31/0810:24 Kan Excel selv beregne alder? Af leahcim i Excel
30/0815:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
White papers
Flere white papers »