loadie.js Chciałbyś mieć podobny pasek ładowania strony, jak ma np. serwis Youtube

Oprócz tego chciałbyś, aby pasek sam się uzupełniał, ukazując w ten sposób jakiś fałszywy postęp zadania.

W tym wpisie właśnie to zrobię.

Najpierw pobierzmy bibliotekę loadie.js ze strony GitHub.

http://9elements.github.io/loadie.js/

Do symulacji długiego oczekiwania na odpowiedź wywołania AJAX utworzyłem prosty projekt ASP.NET Web API.

Pierwsze zapytanie będzie trwało 7 sekund. Drugie tylko dwie.

public class ValuesController : ApiController
{
    // GET api/<controller>
    public IEnumerable<string> Get()
    {
        Thread.Sleep(7000);
        return new string[] { "value1", "value2" };
    }

    // GET api/<controller>/5
    public string Get(int id)
    {
        Thread.Sleep(2000);
        return "value";
    }

Strona będzie zawierać tylko dwa przyciski. Jeden przycisk wywoła jedno zapytanie, inny przycisk drugie. Na stronie oczywiście znajdują się odwołania do skryptów "jQuery" i "loadie.js".

Strona też referuje się do dwóch plików CSS. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Script/jquery.min.js"></script>
    <script src="Script/jquery.loadie.min.js"></script>
    <script src="Script/myScript.js"></script>
    <link href="Content/loadie.css" rel="stylesheet" />
    <link href="Content/myStyle.css" rel="stylesheet" />
</head>
    <body>
        <br />
        <br/>
        <button id="btn6SendAjaxRequest">
            Wyślij zapytanie AJAX, które trwa 7 sekund
        </button> 
        <button id="btn3SendAjaxRequest">
            Wyślij zapytanie AJAX, które trwa 2 sekundy
        </button> 
    </body>
</html>

Plik "loadie.css" zawiera definicję paska ładowania. Zmieniłem jego domyślny rozmiar i kolor.

.loadie {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00b1ff;
    width: 0;
    height: 12px;
    -webkit-transition: width 0.5s ease-out;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.25);
}

Plik "myStyle.css" zawiera tylko styl pozbawiający znacznika body domyślnych głupich ustawień.

body {
    margin: 0;
    padding: 0;
}

Przejdźmy teraz do głównej części tego wpisu. Pokazanie paska postępu jest dosyć proste. Wystarczy określić element, na którym pasek ma być dodany i uruchomić funkcję "loadie". Wewnątrz funkcji wpisujemy wartość paska. Wartość 0.02 określa 2%.

 $('body').loadie(0.02);

Pojawia się jednak problem. Pasek nie będzie automatycznie sam się uzupełniał. Przy zapytaniach 7-sekundowych użytkownik może zapytać “co do cholery dzieje się z tym paskiem? Już od 6 sekund stoi w tym samym miejscu.

Postanowiłem wiec napisać prosty skrypt, który  co pół sekundy  będzie aktualizował zawartość paska.

W funkcji "setAjaxProgressLoadie" , dzięki podpięciom się do globalnych zdarzeń Ajax, mogę wywołać pasek ładowania przy każdym wywołaniu AJAX i mogę go uzupełnić do końca, gdy zapytanie się skończy. Aby ukryć pasek, ładowania muszę wywołać funkcję "loadie" z wartością 1. Wartość 1 reprezentuje 100%.

Przy starcie każdego wywołania Ajax muszę upewnić się, że element loadie jest pokazany. Dlatego uruchamiam na nim funkcje “show().

Zauważyłem problem ze skryptem loadie, gdy wiele razy się z niego korzysta. Po pierwszym użyciu pasek jest ukryty. Musimy więc wymusić jego pokazanie.

var loadieDemo = {
    setAjaxProgressLoadie: function () {
        $body = $("body");
        $(document).on({
            ajaxStart: function () {
                $('body').loadie(0.02);
                $('.loadie').show();
                loadieDemo.stopTimer = false;
                loadieDemo.increaseLoadie(0.05);
            },
            ajaxStop: function () {
                loadieDemo.stopTimer = true;
                $('body').loadie(1);
            },

        });
    },
    increaseLoadie: function (procent) {
        var timerId = setInterval(function () {

            if (loadieDemo.stopTimer)
                clearInterval(timerId);

            if (procent < 0.64) {
                procent = procent + 0.14;
            } else if (procent < 0.84) {
                procent = procent + 0.04;
            } else if (procent < 0.95) {
                procent = procent + 0.02;
            }
            $('body').loadie(procent);
        }, 500);
    },
}

Funkcja "increaseLoadie" będzie zwiększać pasek co pół sekundy. Aktualizacja paska tworzy iluzję, że rzeczywiście wiemy, jaki jest postęp obecnego zapytania AJAX.

Gdy zapytanie się wykona zmienna "loadieDemo.stopTimer" będzie przechowywała prawdę. Gdy to się stanie, nasz timer zostanie wyczyszczony i zlikwidowany.

Na koniec przy załadowaniu strony powinniśmy ustawić podpięcie zdarzeń AJAX.

Do dwóch przycisków dodałem odpowiednie wywołanie AJAX, które się wywoła w trakcie kliknięcia.

$(function () {

    loadieDemo.setAjaxProgressLoadie();

    $('#btn6SendAjaxRequest').click(function (e) {
        var btn = $('#'+e.target.id);
        btn.hide();
        $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "GET",
            url: "/api/Values/",
            cache: false
        }).done(function (data) {
            btn.show();
        }).fail(function (d) {});
    });

    $('#btn3SendAjaxRequest').click(function (e) {
        //podobny kod
    });
});

Oto efekt.

loadie2_thumb2_thumb[2]

Pobierz Kod