Transperente loading messege

Dragon4048 · 10. April 2007, 13:45

Hallo zusamenn

Vieleicht kann mir hier einer helfen wie man sowas in die tat umsetzt.

Undzwar wie bekomme ich eine transperente loading messege hin in java oder php.

Hier mal ein beispiel

.... enfernt

vielen dank

Torben Brodt · 10. April 2007, 13:56

mit PHP hat das nichts zu tun.
Brauchst nur ein bisschen CSS

Quellcode

#progress {
width: 100%;
height: 100%;
z-index: 9;
display:none;
position: absolute;
top:0px;
left:0px;
vertical-align: middle;
text-align: center;
background-image: url(overlay.gif);
}

Alles anzeigen

das div Element und das JavaScript

Quellcode

function doProgress() {
window.scrollTo(1,1);
document.getElementById('progress').style.visibility = 'visible';
document.getElementById('progress').style.display = 'block';
}

das overlay.gif ist ein raster aus transparenten und weißen Pixeln.
Dass ist ressourcenschonend. Schöner (aber ressourcenhungriger) bekommst du es mit Alpha Blending hin.

Mit der CSS-Eigenschaft 'filter:alpha(opacity=)' (IE), '-moz-opacity' (Gecko-Browser), sowie 'opacity' (Opera 9+) lässt sich die Transparenz eines Elements bestimmen.

Dragon4048 · 10. April 2007, 13:59

das hatte ich schon versucht jedoch ohne erfolg

Torben Brodt · 10. April 2007, 14:00

naja, ist doch nur der Quelltext der angesprochenen Seite. Und da funktioniert er ja auch. Dann hast du einen anderen Fehler eingebaut.

Dragon4048 · 10. April 2007, 14:02

ne habs selbst auf einer nackten seite mit einem butten versucht jedoch ohne erfolg deshalb suche ich nach einem weiteren code

Dragon4048 · 10. April 2007, 14:10

weiss da einfach net mehr weiter

Torben Brodt · 10. April 2007, 14:13

Sei doch bitte einsichtig und sieh ein, dass wenn du einen Code 1:1 von einer Seite kopierst, die funktioniert, es auch nur weiterhin funktionieren kann.

Ansonsten poste doch mal deinen "Versuch"

Hier mein funktionierender:

Quellcode

<html><head>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head><body>
<div id="progress">
Daten werden geladen, bitte warten...
</div>
<a href="#" onclick="doProgress()">asd</a>
</body></html>

Alles anzeigen

Dragon4048 · 10. April 2007, 14:18

habs nun so versucht. er macht es schonmal allerdings hört er net mehr auf er macht immer weiter ohne pasue

hier mal der code

"Dragon4048" schrieb:

<style type="text/css">

</style>
<div id="progress"><img src="loading.gif" border=0></div>
<div id="progressjs">
<script type="text/javascript">
</script>
<script type="text/javascript">{literal}
function doProgress() {
window.scrollTo(1,1);
document.getElementById('progress').style.visibility = 'visible';
document.getElementById('progress').style.display = 'block';
}
{/literal}
</script>

Torben Brodt · 10. April 2007, 15:01

Wie lange die Meldung bleibt hängt davon ab, wie du das Script aufrufst.
Wenn du bei bei meinem Beispiel eine URL ins href einfügst, dann wird die Lademeldung eben wie auf der Teamspeak Seite nur wenige Augenblicke dargestellt.

Dass es keine wirkliche Ladefunktion ist, sollte dir klar sein. Bei den Codefragmenten geht es einzig allein um diesen transparenten Overlay. Für einen Preloader brauchst du andere Codes.

ach, entfern noch das "#oder mehr" aus deinem Code - das war nur ein hint von mir. Ist aber falsche Syntax.

Dragon4048 · 10. April 2007, 15:17

gibt es den keine fertigen code die man einfach nur noch rein kopieren kann?

Weil seltsam ist das schon wenns der selbe cod ist und bei mir lädt er immer weiter und bei dem anderen macht ers genau so wie es serin soll obwohl nichts verändert ist

Torben Brodt · 10. April 2007, 15:38

Deine Antworten brauchen im Schnitt 3 Minuten. Nimm dir etwas mehr Zeit und lies dir bitte mein letztes Posting nochmal durch.

"d0nUt" schrieb:

Bei den Codefragmenten geht es einzig allein um diesen transparenten Overlay. Für einen Preloader brauchst du andere Codes.

Und das "#oder mehr" hast du auch noch nicht entfernt.
Ansonsten gibt es bestimmt fertige Codes die auch wirklich Bilder vorladen: [google]preloader javascript[/google]

Bei der URL die du mir geschickt hast gibts auch noch weitere grobe Fehler im Code.
http://validator.w3.org/

Dragon4048 · 10. April 2007, 16:21

Habs hin bekommen soweit

hier der javacod

function loadImages() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'hidden';
}
else { // IE 4
document.all.hidepage.style.visibility = 'hidden';
}
}
}
</script>
<BODY OnLoad="loadImages()">

Gibst dafür noch einen behel im zusagen das er sag ich mal als beispiel 3 sek lädt? Das ist bei mir so schnell das sieht man kaum

Gruss

Sascha

Torben Brodt · 10. April 2007, 16:47

http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout

Quellcode

<html><head><title>Test</title>
<script type="text/javascript">
function loadImages() {
....
}
window.setTimeout("loadImages()", 3000);
</script>
</head>
<body>
....
</body>
</html>

Alles anzeigen

Transperente loading messege

Transperente loading messege

Quellcode

Quellcode

Quellcode

"Dragon4048" schrieb:

"d0nUt" schrieb:

Quellcode

Teilen

Benutzer online 1

Tags