Loading:


    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>
     




    Dodano przez: igor
    Ranga: Administrator serwisu Punktów: 0
    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-2025 v.1.5 | design: diviXdesign & rainbowcolors