Avatar billede oersted-pedersen Nybegynder
02. august 2002 - 01:03 Der er 14 kommentarer og
1 løsning

>>Loading - please wait<<

Jeg har en side, hvor et forholdsvist tungt billedet skal loades, mens en masse andre billeder loades.
Jeg kunne godt tænke mig, at der mens det omtalte billede loades, var en text eller en let animation der gjorde opmærksom på dette.

Hvordan laver mand det ?

Pft :)
Avatar billede Slettet bruger
02. august 2002 - 01:07 #1
Du kunne evt sætte en rollover text på den fylder jo intet :)
<p>
<marquee width="149">Loading... Please wait</marquee></p>
Avatar billede Slettet bruger
02. august 2002 - 01:08 #2
Bruger den selv her :)
www.friserverplads.dk/westhi
Avatar billede koon Nybegynder
02. august 2002 - 01:09 #3
Med denne kode kommer der en linie frem når du skifter mellem dine sider, så man kan se at den loader;
Dette skal i  <head>
<style type="text/css">
#divLoadCont {position:absolute; z-index:500; left:0px; top:0px; width:100%; height:98%; clip:rect(0px 100% 100% 0px); background-color:#ffffff; layer-background-color:#ffffff;}
#divLoad1    {position:absolute; layer-background-color:silver; background-color:silver;}
#divLoad2    {position:absolute; left:0px; top:0px; layer-background-color:navy; background-color:navy;}
#divLoadText {position:absolute; background-color:transparent; font-family:arial,helvetica,sans-serif; color:navy; font-size:14px;}
</style>


<script language="JavaScript" type="text/javascript">

function lib_bwcheck(){ //Browsercheck (needed)
    this.ver=navigator.appVersion
    this.agent=navigator.userAgent
    this.dom=document.getElementById?1:0
    this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6
    this.mac=this.agent.indexOf("Mac")>-1
    this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    return this
}
var bw=lib_bwcheck()

/*VARIABLES TO SET START: */
numImages = 10    //How many images you have in your page
loaderWidth = 300 //The width of the loadbar
/*
All other settings, like colors fonts and stuff like that you
have to change in the STYLE section.

IMPORTANT:
To make this actually show the correct results
you have to place THIS code in all images:
onload="loadIt(1)"

Which means that your image should look
something like this:
<img src="whatever.gif" width="10" border="0" height="10" onload="loadIt(1)">


VARIABLES TO SET END: */



// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

currentImg = 0
//Document size object ********
function lib_doc_size(){
  this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
  this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
  if(!this.x2||!this.y2) return message('Document has no width or height')
  this.x50=this.x2/2;this.y50=this.y2/2;
  return this;
}

//Lib objects  ********************
function lib_obj(obj,nest){
  nest=(!nest) ? "":'document.'+nest+'.'
  this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;   
  this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
  this.ref=this.css
  this.w=this.evnt.offsetWidth||this.css.clip.width||
    this.ref.width||this.css.pixelWidth||0;
  return this
}
//Moving object to **************
lib_obj.prototype.moveIt = function(x,y){
  this.x=x; this.y=y; this.css.left=x+px; this.css.top=y+px;
}
//Clipping object to ******
lib_obj.prototype.clipTo = function(t,r,b,l,setwidth){
  this.ct=t; this.cr=r; this.cb=b; this.cl=l
  if(bw.ns4){
    this.css.clip.top=t;this.css.clip.right=r
    this.css.clip.bottom=b;this.css.clip.left=l
  }else{
    if(t<0)t=0;if(r<0)r=0;if(b<0)b=0;if(b<0)b=0
    this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
    if (setwidth){
        this.css.pixelWidth = r;
        this.css.pixelHeight = b;
        this.css.width = r+px;
        this.css.height = b+px;
    }
  }
}
var oLoad2
function startLoading(){
  page = new lib_doc_size()
  oLoadCont = new lib_obj('divLoadCont')
  oLoad = new lib_obj('divLoad1','divLoadCont')
  oLoad2 = new lib_obj('divLoad2','divLoadCont.document.divLoad1')
  oLoadText = new lib_obj('divLoadText','divLoadCont.document.divLoad1')
  oLoad.moveIt(page.x50-loaderWidth/2,page.y50-20)
  oLoadText.moveIt(loaderWidth/2 - oLoadText.w/2,10)
  oLoad.clipTo(0,loaderWidth,40,0,1)
  oLoad2.per = loaderWidth/numImages
}
function loadIt(ok){
  currentImg ++
  if (oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,40,0,1)
  if (!ok){
    oLoadCont.css.visibility = "hidden"
    oLoadCont = null;
    oLoad1 = null;
    oLoad2 = null;
  }
}

//DISPLAY FUNCTION - DELETE START -------- DELETE THIS *************
//LEAVE THIS FUNCTION WHILE TESTING. DELETE WHEN READY
function loadIt_display(ok){
  currentImg ++
  if (oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,40,0,1)
  if (currentImg<=numImages) setTimeout("loadIt_display(1)",200)
  else{
    oLoadCont.css.visibility = "hidden"
  }
}
//DISPLAY FUNCTION - DELETE END *************************************
</script>
       
Denne del skal være som det første efter <body> tagget- det er meget vigtigt!
<!-- ALWAYS HAVE THIS RIGHT AFTER THE BODY START TAG -->
<div id="divLoadCont">
  <div id="divLoad1">
    <div id="divLoad2"></div><br>
    <div id="divLoadText">Loading...</div>
  </div>
</div>
<script>
startLoading()
//onload=loadIt; //- LEAVE THIS LINE WHILE TESTING. UNCOMMENT WHEN READY
loadIt_display(1) //LEAVE THIS LINE WHILE TESTING. DELETE WHEN READY
</script>
<br><br><br>
CONTENT
<br><br>
Avatar billede Slettet bruger
02. august 2002 - 01:09 #4
Du vil have en preloader eller hvad??
Avatar billede koon Nybegynder
02. august 2002 - 01:10 #5
Det var et svar
Avatar billede koon Nybegynder
02. august 2002 - 01:11 #6
Jeg kan give dig et link, hvis du vil se et eksempel
Avatar billede Slettet bruger
02. august 2002 - 01:11 #7
Java script koden til en preloader er følgende:
< script language="JavaScript" >
< !--//
//pre loader
newimage0 = new Image();
newimage0.src = "FIRST-IMAGE.gif";
newimage1 = new Image();
newimage1.src = "SECOND-IMAGE.gif";
//-- >
< /script >
Så skal du bare vælge hvilke billeder den skal loade..
Avatar billede jonny Nybegynder
02. august 2002 - 07:57 #8
Prøv det her.
-----------------------------------------

<html>
    <head>
    <title>Siden er flyttet!</title>
        <script language="javascript">
        <!--
        function Loader()
        {
            setTimeout("Tekst1.document.all['Tekst1'].innerHTML = '6'", 1000);
            setTimeout("Tekst1.document.all['Tekst1'].innerHTML = '5'", 2000);
            setTimeout("Tekst1.document.all['Tekst1'].innerHTML = '4'", 3000);
            setTimeout("Tekst1.document.all['Tekst1'].innerHTML = '3'", 4000);
            setTimeout("Tekst1.document.all['Tekst1'].innerHTML = '2'", 5000);
            setTimeout("Tekst1.document.all['Tekst1'].innerHTML = '1'", 6000);
            setTimeout("Tekst1.document.all['Tekst1'].innerHTML = '0'", 7000);
            setTimeout("top.location.href('http://www.westhi.h4f.dk');", 7000);
        }
        //-->
        </script>
    </head>

    <body onLoad="Loader();" bgcolor="#a78c5c" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" link="#000000" vlink="#000000" alink="#000000">

    <div id="LoadPic" style="visibility:hidden;">
        <!-- Billeder placeret i et layer caches automatisk når siden loades-->
        <img border="0" src="images/Westhi%20Animation%20top.gif" width="350" height="150">
    </div>

    <br><br><br>

    <p align="center">
        <font size="6" face="Cooper Black,Arial">
            <b>Flyttet!</b>
        </font>

        <font face="Verdana" size="2" color="#000000">
            Siden er flyttet til
            <a href="http://www.westhi.h4f.dk">
                <u>
                    www.westhi.h4f.dk
                </u>
            </a>
        </font>

        <br><br><br><br>

        <a href="http://www.westhi.h4f.dk/images/westhi%20animation%20top.gif">
            <img border="0" src="images/Westhi%20Animation%20top.gif" width="350" height="150">
        </a>

        <br><br><br><br>

        <font face="Verdana" size="2">
            Du vil blive viderestillet automatisk om <font id="Tekst1">7</font> sekunder.
        </font>
    </p>
</body>
</html>
Avatar billede Slettet bruger
02. august 2002 - 10:20 #9
Hvis jeg har forstået dig ret, er det egentlig ikke et preload-script, du ønsker, men se alligevel de her:
http://www.dynamicdrive.com/dynamicindex4/preloadit.htm
http://www.dynamicdrive.com/dynamicindex4/preloadimage2.htm
Avatar billede callesen Praktikant
02. august 2002 - 10:29 #10
Hvis jeg forstår det ret er det noget lignende:
Et style i <head>:
<STYLE TYPE="text/css">
<!--   
  #cache
  {   
  position:absolute;
  left=10;
  top:10px;
  z-index:10;
  visibility:hidden;   
  }   
-->
</STYLE>
og så i
<BODY onLoad="cacheOff()">   
<SCRIPT LANGUAGE="JavaScript">
    ver = navigator.appVersion.substring(0,1)
    if (ver >= 4)
        {
        document.write('<DIV ID="cache"><TABLE WIDTH=400 BGCOLOR="#000000" BORDER="0" CELLPADDING="2" CELLSPACING="0"><TR><TD ALIGN="center" VALIGN="middle"><TABLE WIDTH=100% BGCOLOR="#206080" BORDER="5" CELLPADDING="0" CELLSPACING="0"><TR><TD ALIGN="center" VALIGN="middle">HER SKRIVER DU BESKEDEN DER SKAL KOMME, NÅR DU LOADER. HVIS DU VIL VISE ET LILLE BILLEDE SKRIVER DU DENNE KODE: <IMG SRC="Billedet.gif" BORDER="0" WIDTH="111" HEIGHT="111" ALIGN="bottom" ALT="Den alternative tekst"></TD> </TR></TABLE></TD> </TR></TABLE></DIV>');
        var navi = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
        var HIDDEN = (navi) ? 'hide' : 'hidden';
        var VISIBLE = (navi) ? 'show' : 'visible';
        var cache = (navi) ? document.cache : document.all.cache.style;
        largeur = screen.width;
        cache.left = Math.round(100);
        cache.visibility = VISIBLE;
        }
    function cacheOff()
        {
        if (ver >= 4)
            {
            cache.visibility = HIDDEN;
            }
        }
    </SCRIPT>

og så resten af siden ->
Avatar billede pelkjaer Nybegynder
02. august 2002 - 11:07 #11
<script language="JavaScript" type="text/javascript">
<!--
// Placeres i HEAD sektionen på din side
  var win = window.open("about:blank","Progress","toolbar=no,width=200,height=100,directories=no,status=no,scrollbars=no,resize=no,menubar=no");
  win.document.open();
  win.document.writeln('<hmtl><head><title>Loading..........</title></head>'); 
  win.document.writeln('<body bgcolor="white"><br><center>');
  win.document.writeln('<font face="Arial,Helvetica" size=2 color="red"><b>Loading...</b></font><br><br>');
  win.document.writeln('<font face="Arial,Helvetica" size=2><b>Please Wait.</b></font></center>');
  win.document.writeln('</body></html>');
  win.document.close();
//-->
</script>


<!-- Indsæt dette i dit body tag-->
onload="win.close();"
Avatar billede manon Nybegynder
02. august 2002 - 13:20 #12
pelkjaer >> kan du kontaktes på den email som er anført under din info?
Avatar billede oersted-pedersen Nybegynder
19. januar 2003 - 01:03 #13
Fandt selv en løsning
Avatar billede Slettet bruger
19. januar 2003 - 01:05 #14
det var du godt nok længe om at lukke :)
Avatar billede oersted-pedersen Nybegynder
19. januar 2003 - 01:07 #15
I know.. *sorry* :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester