Registrierer
Erfahrenes Mitglied
Preloader findet man viele, aber oft sehr überladen. Das wollte ich nicht.
Ich hab in einer Werkstatt ein größeres Projekt am Laufen und wollte, dass wenn Ladezeiten entstehen (z. T. durch schlechte Verbindung und langsamen Anschluß), die Seite ausgegraut, und eine Ladegrafik angezeigt wird.
Als Anfänger in jQuery hab ich mal folgendes selbst geschrieben, was sogar funktioniert:
loader.js
index.html
style.css
Folgende Fragen zur loader.js habe ich:
1. Ist der Zugriff auf div.load in der IF Abfrage korrekt?
2. Ist die Sytax und das Vorgehen korrekt?
3. Was müsste ich bei der Fehlerbehandlung beachten?
4. Setze ich die $(window).load() Funktion vor oder nach einem später hinzu kommenden $(document).ready() Block? Oder ist das egal?
5. Und wie kann ich opacity' : '1' ebenfalls einblenden?
Vielen Dank!
Ich hab in einer Werkstatt ein größeres Projekt am Laufen und wollte, dass wenn Ladezeiten entstehen (z. T. durch schlechte Verbindung und langsamen Anschluß), die Seite ausgegraut, und eine Ladegrafik angezeigt wird.
Als Anfänger in jQuery hab ich mal folgendes selbst geschrieben, was sogar funktioniert:
loader.js
Javascript:
$(window).load(function() {
$('#loader').show(function() {
$('#loader').fadeOut(500, function() {
$(this).remove();
if ( $('div.load').css('opacity') < '1' ) {
$('div.load').css({
'opacity' : '1',
});
}
});
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="loader.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="mitte">
<div id="loader">
<img src="ajax-loader.gif" alt="Seite wird geladen">
</div>
</div>
<div id="load" class="load">Ganz viel Lorem ipsum</div>
</body>
</html>
CSS:
body {
background-color: #D2CEAE;
}
#load {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
-moz-opacity: 0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
#mitte {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 0px;
text-align: center;
}
#loader {
margin-left: -50px;
position: absolute;
top: -50px;
left: 50%;
}1. Ist der Zugriff auf div.load in der IF Abfrage korrekt?
2. Ist die Sytax und das Vorgehen korrekt?
3. Was müsste ich bei der Fehlerbehandlung beachten?
4. Setze ich die $(window).load() Funktion vor oder nach einem später hinzu kommenden $(document).ready() Block? Oder ist das egal?
5. Und wie kann ich opacity' : '1' ebenfalls einblenden?
Vielen Dank!
