webentwicklung-frage-antwort-db.com.de

jQuery Site/Inhalt nach dem Laden einblenden?

Gibt es Tutorials oder Plugins zum Einblenden einer Website, sobald sie ordnungsgemäß geladen wurde, um Störeinflüsse usw. zu begrenzen, sodass der Inhalt im Grunde reibungslos angezeigt wird?

Ich nehme an, es wäre einfacher, wenn es nur ein bestimmter Bereich wäre, da eine Kopf- oder Fußzeile bereits von vorherigen Seiten zwischengespeichert wird ...

Beispiel: Eine Portfolio-Seite mit verschiedenen Miniaturansichten wird erst dann reibungslos angezeigt, wenn sie fertig ist.

Kann das gemacht werden?

Vielen Dank für jede Hilfe :)

8
Jezthomp

Ja, umhüllen Sie Ihren Inhalt mit einem div (z. B. <div id="main-content">) und geben Sie Folgendes in Ihre CSS ein:

div#main-content { display: none; }

Dann benutze dieses Skript.

$(document).ready(function() {
    $('#main-content').fadeIn();
});
16
Yes Barry

Zunächst ein Nebeneffekt: Im Allgemeinen verbringen Webdesigner viel Zeit damit, die wahrgenommene Ladezeit von Seiten zu verbessern, damit die Dinge so schnell wie möglich angezeigt werden. Dies geht aktiv in die andere Richtung und zeigt eine leere Seite an, bis alles fertig ist, was möglicherweise nicht ideal ist.

Aber wenn es für Ihre Situation angemessen ist:

Da alles, was sichtbar ist, ein Nachkomme von body ist, können Sie body hidden laden und dann einblenden. Es wäre wichtig, einen Fallback für Benutzer ohne JavaScript einzuschließen (in der Regel mindestens 2% laut Yahoo , aber immer noch). Also im Sinne von:

(Live-Kopie)

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- This next would probably be in your main CSS file, but shown
     inline here just for purposes of the example
-->
<style type="text/css">
body {
    /* Hide it for nifty fade-in effect */
    display: none;
}
</style>
<!-- Fallback for non-JavaScript people -->
<noscript>
<style type="text/css">
body {
    /* Re-displays it by overriding the above */
    display: block;
}
</style>
</noscript>
</head>
<body>
...content...
<script src="jquery.js"></script>
<script>
// This version runs the function *immediately*
(function($) {

  $(document.body).fadeIn(1000);

})(jQuery);
</script>
</body>
</html>

Je nachdem, wann das Einblenden erfolgen soll, gibt es einige Variationen des Skriptteils:

Warten Sie auf das Ereignis "Bereit":

Live-Kopie

// This version waits until jQuery's "ready" event
jQuery(function($) {

  $(document.body).fadeIn(1000);

});

Warten Sie auf das Ereignis window#load:

Live-Kopie

// This version waits until the window#load event
(function($) {

  $(window).load(function() {
    $(document.body).fadeIn(1000);
  });

})(jQuery);

window#load wird very zu einem späten Zeitpunkt des Seitenladevorgangs ausgelöst, nachdem alle externen Ressourcen (einschließlich aller Bilder) geladen wurden. Aber Sie sagten, Sie wollten warten, bis alles geladen ist. Vielleicht möchten Sie das tun. Es wird definitiv Ihre Seite langsamer erscheinen lassen ...

27
T.J. Crowder

Eine andere Möglichkeit, dies zu erreichen, ist das Projekt Animate.css. Es ist reines CSS, sodass Sie sich nicht auf JS verlassen müssen:

https://daneden.me/animate/

Fügen Sie Ihrem übergeordneten Element einfach die Klassen 'animated' und 'fadeIn' hinzu, und alle untergeordneten Elemente werden eingeblendet.

4
direct

jQuery(document).ready(function(){
jQuery("#container").fadeIn();
});

dabei ist container die ID des Divs, das Ihren gesamten Inhalt enthält.

1
sushil bharwani
$(document).ready(function() {
    $('body').hide().fadeIn('fast');
});
1
Stefan Endres
div#main-content { display: block; }

Um es mit oder ohne Javascript arbeiten zu lassen, können Sie verwenden

document.getElementById("#main-content").style.display = "none";

Dann benutze dieses Skript.

$(document).ready(function() {
 $('#main-content').fadeIn();
});
0
user3686007