Jump to content
Just nu i M3-nätverket

Hur gör man en loading bar?


thåström

Recommended Posts

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...