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

d3mueller · 22. Mai 2012

Hi, ich wollte für meine Webseite eine Ladefunktion einbauen. Heißt, während er die Seite lädt, soll er ein Ladezeichen anzeigen (von http://ajaxload.info/).
Wenn dann die Seite fertig ist, soll es verschwinden, und der content mit FadeIn eingebunden werden.

Mein Code:

Javascript:

<script type="text/javascript">
$(document).ready(function() {
	$("#laden").css("display", "none");
	$("#content").delay(200).fadeIn("slow");

});
</script>

CSS:

#laden {
	display:block;
}
#content {
	display: none;
}

HTML:

<div id="laden"><img src="ajax-loader.gif"></div>

<div id="content">
Der Inhalt der Seite.
</div>

Leider scheint es nicht zu funktionieren

Ich habe testweise einen delay() eingefügt:

Javascript:

<script type="text/javascript">
$(document).ready(function() {
	$('#laden').delay(200).css("display", "none");
	$("#content").delay(500).fadeIn("slow");

});
</script>

Aber da erscheint gar kein Ladezeichen mehr. wisst ihr, warum? Und wie ich das lösen kann?

Habe halt gerade vor 20min mit jQuery angefangen^^. Macht vieles einfacher(wenn mans denn kann)

LG
Dennis

PS: wie schafft man es dann, dass wenn man auf einen Link klickt, die Seite auch wieder ausfadet, und die nächste dann wieder eingeblendet wird. So einen Effekt würde ich gerne hinbekommen.

PPS: Funktioniert das dann auch, wenn ich mit der include() funktion von PHP arbeite auf meiner webseite? Also da ist das so:
Er prüft, mit $_GET nach dem Wert von name, und includet dann name.php (z.B. kontakt.php). Geht das dann damit auch?

Lime · 22. Mai 2012

Nein, das geht nicht. Du kannst mit Ajax aber Inhalte nachladen. Dazu kannst du auch Effekte einbinden... z.B. erst slideUp (content fährt zusammen), dann den Ajax-Request um den Seiteninhalt zu laden, anschließend wieder einen slideDown (dann wird der content wieder sichtbar).

Du kannst schon eine Seite laden, die z.B. index.php?page=portal heißt, allerdings lädst du dann ja die gesamte Seite und nicht nur den Bereich, wo das Portal drin ist. Somit solltest du eben nur die portal.php laden.

Ein wirklich gutes Tutorial hierzu: http://marco.seaside-graphics.de/pr...it-einem-link-dynamisch-laden-anzeigen-lassen
Das beschränkt sich aber nur auf das Nachladen von Inhalten.

Mit Ajax kannst du natürlich noch ganz andere Sachen machen... Skripte ausführen und ein Resultat anzeigen, etc.

lg Lime

d3mueller · 22. Mai 2012

Hi,
Danke.
das mit SlideUp und slideDown schaue ich mir gleich mal an.
meinst du mit inhalt nachladen das .load() ? Das habe ich auch probiert, aber es funktioniert irgendwie nicht, er lädt die Seite nicht in den Bereich.(geht das vllt nicht lokal, mit XAMPP?)
Und wenn ich das so machen würde, müsste ich ja den kompletten Include-Teil weglassen, und es durch jquery ersetzen oder?
Weil dann müsste ich irgendwie die case funktion in php mit jquery hinbekommen:

PHP:

$action=$_GET['action'];
        switch($action)
        {
  case 'admin':
    display_login_form();
  break;
  ....
  ....
  ....

Mit dem Tutorial:
Ja, sowas meine ich.
Also, wenn ich das so machen würde, bräuchte ich das oben mit dem $_GET, da ich ja direkt die Seiten einbinde. So ist das ja viel einfacher^^ und schöner. Und es würde mein Problem doch lösen.
Was meinst du mit "Das beschränkt sich aber nur auf das Nachladen von Inhalten." ?
Meinst du, das da die Ladeanimation fehlt? Oder übersehe ich grad was, und es ist doch nicht so einfach?

Darf ich den Code von diesem Tutorial auch verwenden und ggf. anpassen?

Mit Ajax... Ist das so was ähnliches wie jQuery?
Kenn mich da nicht so aus.

Danke nochmal

Lg
Dennis

EDIT: ok, wenn ich es so wie im tutorial mache, dann funktioniert das mit den funktionen nicht mehr, denn jenachdem, was oben in der Zeile steht, führt er eine PHP-Funktion aus. Und das würde ja dann wegfallen, und die Funktionen können nicht mehr ausgeführt werden.

EDIT 2: Und das Problem ist, dass man die zurück-taste nicht mehr verwenden kann, da er ja die Seite nicht wirklich neulädt. Das ist der nachteil. Kann man das anders machen?

Momo95 · 22. Mai 2012

Hallo,

auf dieser Seite habe ich es auch mit jQuery gemacht: http://175ccm.moritz-morgenstern.de

Wenn die Seite fertig geladen ist, rollt das Tor auf, wenn du die Seite verlässt, schließt das Tor wieder. Hier ist der js Code in gekürtzter version:

Javascript:

<script>

$(document).ready(function () { 
  		$("#door, #logo2").animate({top: '-100%'}, {duration:2000,easing:'easeInQuint'});
    }); 

function link(link) { 
      $('#door, #logo2').animate({top: '0'},2000, function () {duration:0,
  		window.location.href = link;      
      });      
}        
</script>

verlinkt habe ich dann so:

Javascript:

onClick="link('http://175ccm.moritz-morgenstern.de/?id=album&&album=vespa')"

Wenn du aber nur faden willst, reicht es wenn du einen Layer über die gesamte seite setzt und den dann ein bzw. ausblendest:

Javascript:

<script>

$(document).ready(function () { 
  		$("#layer").fadeOut(300);
    }); 

function link(link) { 
      $('#layer').fadeIn(2000, function () {
  		window.location.href = link;      
      });      
}       
</script>

d3mueller · 22. Mai 2012

Hi,
Danke für die Antwort.

Ich habe das ganze so versucht einzubauen:

HTML:

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



 <section id="layer" style="background-color: white"><center><img src="ajax-loader.gif"></center></section>



	<section style="padding: 10px;" id="content">
		Seite 2
	</section>
</div>

Funktioniert auch, aber ich bekomm die section mit der id layer nicht direkt über die section mit der id content.
wie mache ich das?

Lime · 22. Mai 2012

Die Sache ist ja die.
Du kannst mit PHP einen jQuery-Code schreiben, aber mit jQuery nicht auf einen PHP-Code zugreifen. Jedenfalls nicht so direkt.
Ajax ist ein Teil von jQuery. Die .load() Funktion ist nur eine von vielen. Die Funktion .ajax() ist zum Beispiel weitaus mächtiger. Dort kannst du z.B. Variablen an eine Datei mitschicken, welche von der Datei (nehmen wir mal eine .php-Datei an) ausgewertet werden. Die .php-Datei kann dann, je nach Auswertung, eine Antwort schicken. Das könnte man z.B. für eine Registrierung nutzen oder einen Login. (Refresh erst, wenn die Daten korrekt eingegeben wurden. Sprich, man überprüft zuerst die Daten, bevor die Seite neu geladen wird.)

Den Code von dem Tutorial wirst du denk ich benutzen dürfen, kann dir ja keiner verbieten.

Eine Ladeanimation kannst du natürlich jederzeit hinzufügen... Gemeint habe ich eher, dass du mit jQuery nicht so einfach auf den eigentlichen Programmcode zugreifen kannst. Also du kannst z.B. keine php-Funktion damit einfach auslösen, sondern eben nur über Ajax Inhalte nachladen und anderes dafür ausblenden.

€: Zu deinem vorherigen Post: mach beim style von den sections jeweils noch ne width:100%; rein.

lg

Momo95 · 22. Mai 2012

Hallo,

mache am besten aus den <section> <div>. Dann ersetzt du die style-angaben von layer folgend:

Code:

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

d3mueller · 22. Mai 2012

Lime hat gesagt.:
Die Sache ist ja die.
Du kannst mit PHP einen jQuery-Code schreiben, aber mit jQuery nicht auf einen PHP-Code zugreifen. Jedenfalls nicht so direkt.
Ajax ist ein Teil von jQuery. Die .load() Funktion ist nur eine von vielen. Die Funktion .ajax() ist zum Beispiel weitaus mächtiger. Dort kannst du z.B. Variablen an eine Datei mitschicken, welche von der Datei (nehmen wir mal eine .php-Datei an) ausgewertet werden. Die .php-Datei kann dann, je nach Auswertung, eine Antwort schicken. Das könnte man z.B. für eine Registrierung nutzen oder einen Login. (Refresh erst, wenn die Daten korrekt eingegeben wurden. Sprich, man überprüft zuerst die Daten, bevor die Seite neu geladen wird.)

Den Code von dem Tutorial wirst du denk ich benutzen dürfen, kann dir ja keiner verbieten.

Eine Ladeanimation kannst du natürlich jederzeit hinzufügen... Gemeint habe ich eher, dass du mit jQuery nicht so einfach auf den eigentlichen Programmcode zugreifen kannst. Also du kannst z.B. keine php-Funktion damit einfach auslösen, sondern eben nur über Ajax Inhalte nachladen und anderes dafür ausblenden.

€: Zu deinem vorherigen Post: mach beim style von den sections jeweils noch ne width:100%; rein.

lg

Hmm, das ist dann schon weitaus komplexer^^.

naja mit width geht das ja, aber die Höhe passt leider nicht.

Code:
Hallo,

mache am besten aus den <section> <div>. Dann ersetzt du die style-angaben von layer folgend:

Code:

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

Funktioniert leider nicht. Der geht dann um den ganzen Bildschirm, der Kasten.

Lime · 22. Mai 2012

Mach mal bitte einen Screenshot.
Die Höhe könntest du ja auch definieren... oder eine min-height.

Momo95 · 22. Mai 2012

d3mueller hat gesagt.:
Funktioniert leider nicht. Der geht dann um den ganzen Bildschirm, der Kasten.

Achso, ich dacht das wolltest du so! Sorry. Dann lass nur den z-index und den background drin...

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

d3mueller

Mitglied

Lime

frisch fruchtig

d3mueller

Mitglied

Momo95

Erfahrenes Mitglied

d3mueller

Mitglied

Lime

frisch fruchtig

Momo95

Erfahrenes Mitglied

d3mueller

Mitglied

Lime

frisch fruchtig

Momo95

Erfahrenes Mitglied

Neue Beiträge