✔ jquery - beim Laden soll Ladeanzeige sichtbar sein, die dann verschwindet.

Mach mal bitte einen Screenshot.
Die Höhe könntest du ja auch definieren... oder eine min-height.
Zum Vergrößern anklicken....
Das ist schwer, da man den Kasten ja nur beim Laden sieht, aber ich kann ja mal den jquery effekt weg machen:
EBG5S.png


Habe hier nur den Background, z-index und width drin. (und border zum zeigen)

habe auch schon height probiert. Geht auch nicht

Achso, ich dacht das wolltest du so! Sorry. Dann lass nur den z-index und den background drin...
Zum Vergrößern anklicken....
siehe Screenshot, geht leider auch nicht.
 
Zuletzt bearbeitet:
Ich verstehe leider nicht, wie du die das Aussehen wünscht. Möchtest du, dass der Kasten in der Bildschirm-Mitte ist und dann ausfadet oder willst du nur das gif anzeigen?
 
ne, er soll nur den ganzen content kasten umschließen, das halt nur dieser Bereich dann verschwindet, der rest soll normal bleiben
 
Ok, jetzt weuß ich was du willst :D

Setzte das div mit der ID "layer" in das div m "content". Dann diese style-Angaben:

Code: 
position: relative; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 100; background: #ffffff;

Also so:
HTML: 
<div style="padding: 10px;" id="content">
<div style="position: relative; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 100; background: #ffffff;" id="layer"><center><img src="ajax-loader.gif"></center></div>
Seite 2
</div>
 
Zuletzt bearbeitet:
Ne, ich habe das lokal.
Über XAMPP.

Aber ich kann den kompletten Quellcode schreiben

Code: 
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
 
$(document).ready(function () { 
        $("#layer").fadeOut(300);
    }); 
 
function link(link) { 
      $('#layer').fadeIn(400, function () {
        window.location.href = link;      
      });      
}

</script>

</head>
<body>
	<div id="navigation"> 
		<a style="cursor:pointer;" onclick="link('seite2.html')">Seite 2</a>
	</div>
    
    
    
    
    
    
 <div style="border: 1px solid black;width: 400px;">



<div style="padding: 10px;" id="content">
<div style="position: relative; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 100; background: #ffffff;" id="layer"><center><img src="ajax-loader.gif"></center></div>
Seite 1
</div>
</div>

</body>
</html>
 
Du könntest es ja so lösen:
HTML: 
<div id="main">
   <div id="load"><img ... /></div>
   <div id="content" style="display:none;">Content</div>
</div>

Blende den Content erst ein, wenn die Seite komplett geladen wurde.
Javascript: 
$(document).ready(function() {
    $("#content").show();
    $("#load").hide();
}
 
@Lime
Ja, so könnte es gehen. Bloß kann ich das halt nicht testen, das es lokal einfach zu schnell lädt. Auch wenn ich Bilder einfüge, braucht er nicht lang.

Eine Frage zu dieser Methode: Wenn ich das theoretisch jetzt auf meiner Webseite einbaue, dann muss der jquery-code ja in die Datei, die ich per include einbinde, oder?
Und noch was, wnen die Seite noch nicht geladen ist, ist doch eigentlich auch der Ladebalken und so noch nicht geladen, also würde der theoretisch ja nie angezeigt werden, oder?

PS: Auch wenn ich delay() einfüge, erscheint gar kein Ladezeichen
 
Zuletzt bearbeitet:
Doch, normalerweise sollte das schon funktionieren. Hier ein Trick:
Javascript: 
var t = setTimeout (function() {
    $("#content").show();
    $("#load").hide();
}, 2000);
verzögert alles um zwei Sekunden. Natürlich muss das in $(content).ready() rein.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück