Gå till innehåll
Just nu i M3-nätverket

Hur gör man en loading bar?

thåström

Startad av thåström,
i Utveckling

Rekommendera Poster

Telly82

Telly82

Postad
Postad

Det gör man väl i Flash ifall du har en Flash-sida. Annars tror jag inte det går. I varje fall ingen som har något slags synkning till faktisk nedladdning.

Länk till kommentar
Dela på andra webbplatser
  • 2 weeks later...
Danne Vendel

Danne Vendel

Postad
Postad

Det finns två sätt:

 

Antingen gör du en komplicerad historia i php eller flash eller nåt som faktiskt räknar ner (eller upp) på riktigt hur mycket som kommit ner till användaren och hur mycket som återstår. Jag vet personligen inte hur det går till eftersom jag aldrig har brytt mig eftersom jag anser att det är ganska ointressant för användaren så länge filerna som laddas ner är rimliga och kommer ner inom en rimlig tid.

 

Eller så tar du en animerad gif från t.ex. http://www.ajaxload.info/ Den kan du t.ex. lägga i en absolut positionerad div som är STOR, som dessutom har en färgad bakgrund och som du exekverar med ett "hide onLoad" i bodytaggen.

 

Vad som händer då är att denna div laddar och användaren ser bara divven med den färgade bakgrunden och loadbaren - tills den underliggande sidan laddat klart. Då försvinner divven och sidan syns.

 

Vill du ha detaljer, så återkom.

Länk till kommentar
Dela på andra webbplatser
Danne Vendel

Danne Vendel

Postad
Postad

Här....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#cover {
background: #FF9900;
position: absolute;
height: 100%;
width: 100%;
visibility: visible;
}
-->
</style>

<script type="text/javascript">
<!--
function showHideLayers() { //v9.0
 var i,p,v,obj,args=showHideLayers.arguments;
 for (i=0; i<(args.length-2); i+=3) 
 with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body onload="showHideLayers('cover','','hide')">
<!--- HÄR ÄR DIVVEN SOM KOMMER ATT SKYMMA WEBBSIDAN ---><div id="cover">Den animerade leadbaren läggs in här</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
</body>
</html>

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...