Я хочу создать экран предварительной загрузки с JS HTML CSS JQuery (необязательно) и без серверной части - PullRequest
Новая
       1

Я хочу создать экран предварительной загрузки с JS HTML CSS JQuery (необязательно) и без серверной части

0 голосов
/ 08 февраля 2020

Я хочу создать Pre Loading Screen, чтобы пользователи не покидали мою страницу, если мой сайт загружается поздно. Я готов со всеми своими анимациями, которые я хочу показать при загрузке экрана, и поместил их в div, называемый loadup. Я хочу, чтобы загрузочный div появлялся при запуске и исчезал при загрузке страницы. Я хочу, чтобы у div был белый фон во время загрузки вместо наложения.

1 Ответ

0 голосов
/ 08 февраля 2020

jQuery Метод window.load работает после того, как все содержимое загружено как изображение, js et c. Предварительно загруженный div будет охватывать весь экран с самого начала, и когда загрузка всего контента будет завершена sh, он будет установлен как display: none. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/app.css">
    <title>Preloading Screen</title>
</head>
<body>
    <div class="pre-load">
        <p class="pre-load-text">Hello world</p>
    </div>
    <div class="page-main">
        <header>Your header</header>
        <div class="container">
            <p>Your page content</p>
        </div>
        <footer>Your footer</footer>
    </div>
    <script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous">
    </script>
    <script>
        $(window).load(function() {
            $('.pre-load').css('display', 'none')
        })
    </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...