Loading:

Książka Zend Framework 3. Poradnik Programisty.

Animacja ładowania strony HTML - Loading w jQuery

Pokaże wam jak można przy użyciu jQuery zrobić bardzo atrakcyjną animacje ładowania strony HTML, takie loadingi z reguły widujemy tylko na stronach flash ale nie ma przeszkód aby nie zrobić tego na zwykłej stronie HTML.


Skrypt do działania potrzebuje jQuery.

Opis działania:

Skrypt na początku wyświetla 2 div'y przyciemniający strone oraz div z animacją ładowania, następnie oczekuje na pełne załadowanie strony aby wyłączyć pasek ładowania po poprawnym załadowaniu naszej strony.

Dodatkowo mamy obsługę kliknięcia klasy loadingOn która uruchamia loading od razu po kliknięciu w link dzięki czemu natychmiast uruchamia się pasek ładowania i jes ciągły az to momentu przeładowania nowej strony i jej pełnego załadowania.

Uwaga aby skrypt działał poprawnie zdarzenie $(document).ready dla loadingu musi być ostatnim kodem javascript na tej stronie.

 



Napisz Artykuł

Listing

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.4.1-min.js"></script>
<style type="text/css">
.przyciemnienie{
        position:absolute;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        opacity: .6;
        filter: alpha(opacity=60);
        background:#FFFFFF;
        width:100%;
        height:100%;
        z-index:9998;
}
.loading{
        position:absolute;
        width:300px;
        height:100px;
        background: #fff;
        border: #E0E0E0 solid 1px;
        vertical-align:middle;
        text-align:center;
        left: 50%;
        margin-left:-150px;
        z-index:9999;
        top:150px;
        padding-top:50px;
}
</style>
</head>
<body>
<div id="przyciemnienie" class="przyciemnienie"></div>
<div id="loading" class="loading"><img src="nasz_loading.gif" alt="" /></div>
Tutaj zawartość naszej strony....<br /><br /><br /><br /><br /><br /><br />
<a href="link_do_podstrony" class="loadingOn">Jakiś link</a>

<script type="text/javascript" charset="utf-8">
                $.prettyLoader();
                $(document).ready(function(){
                // Po poprawnym załadowaniu strony wyłącza przyciemnienie
                $("#przyciemnienie").fadeOut('normal');
                // Po poprawnym załadowaniu strony wyłącza loading
                $("#loading").fadeOut('normal');
               
                //Po kliknięciu w link z clasą loadingOn uruchamia loading
                $('.loadingOn').click(function() {
                $("#przyciemnienie").fadeIn('normal');
                $("#loading").fadeIn('normal');
                });
                });
        </script>
</body>
</html>
 


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=6572

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
Bardzo ciekawe... :)
autor: oplaner | 7281 | 2010-11-02 20:36:20


no ciejaxe
autor: tomojer0 | 12420 | 2011-04-30 22:47:01


mkmwmjmjmjmtj
autor: tomojer0 | 12421 | 2011-04-30 23:03:22


fajne a jaki jest kod do tego??
autor: informatyk | 12600 | 2011-10-09 13:28:28


Z pewnością przyda się nie jednej osobie taki bajer
autor: suicide | 12678 | 2011-12-08 21:25:01


Do bani
autor: artur164 | 12724 | 2012-02-04 12:06:37


    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors