Создание анимации загрузки страницы - весенняя загрузка - PullRequest
Новая
       17

Создание анимации загрузки страницы - весенняя загрузка

0 голосов
/ 17 октября 2019

Я создаю весеннее загрузочное веб-приложение, которое загружает данные из базы данных, что иногда занимает несколько секунд. Пока запрашиваемая страница загружается, я хочу создать загрузчик страниц, который будет отображаться сразу после запроса страницы и исчезнет после завершения загрузки запрашиваемой страницы. Внешний интерфейс построен с использованием HTML, тимилиста и нескольких сценариев javascript и JQuery. Я посмотрел этот пример https://bradsknutson.com/blog/display-loading-image-while-page-loads/, но он отображает загрузчик только после того, как страница загружена, а затем сразу выходит из строя.

Вот код, который я попробовал: 

<style>
            .loaderStyle{
                position: fixed;
                left: 0px;
                right: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
            }
        </style>

        <div class="loaderStyle">
            <i class="fa far fa-frown fa-spin"></i>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(window).load(function() {
                $(".loaderStyle").fadeOut("slow");
            })
        </script>

Спасибо за вашу помощь

...