Как я могу отобразить gif загрузки до тех пор, пока не будет загружена вся страница html

У меня есть веб-страница, которая довольно интенсивна с помощью HTML и CSS, что приводит к тому, что некоторые элементы загружаются быстрее, чем другие, когда пользователь посещает страницу. Фон может занять некоторое время, чтобы загрузить и т.д. Он становится довольно уродливым, увидев, что он загружает элемент по элементу...

Итак, мне интересно, как я могу сначала загрузить другую страницу (страница 1, которая имеет просто gif и минимальные значения html), а затем страница2 (страница с интенсивным html) появится только после того, как клиентский браузер выберет все страницы html.

Я считаю, что это можно сделать с помощью JQuery, о котором я почти ничего не знаю...

Любые советы будут оценены, Спасибо,

Ответ 1

Используйте следующий HTML (лучше всего в верхней части тела):

<div id="loading"></div>

И этот CSS:

#loading {
    background: url('spinner.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
}

И следующий JavaScript (использует jQuery):

function hideLoader() {
    $('#loading').hide();
}

$(window).ready(hideLoader);

// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);

Вы можете поместить стили inline в div а не в таблицу стилей, чтобы меньше шансов на флэш-контент перед загрузчиком. Кроме того, вы можете использовать https://www.askapache.com/online-tools/base64-image-converter/ или аналогичный инструмент для преобразования вашего GIF в базовый 64 URI и использовать это вместо spinner.gif.

Ответ 2

    <div id="overlay"></div>
<style>
    #overlay {
        position: fixed;
        background: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .hide {
        display: none;
    }
</style>
<script>
    $(window).load(function() {
     $('#overlay').addClass('hide');
    });
</script>

Ответ 3

Я реализовал в Laravel и работал, как ожидалось,

<style>
.loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background-color: #ffffffcf;
        }
        .loader img{
            position: relative;
            left: 40%;
            top: 40%;
        }
</style>

<div class="loader" ><img src="{{asset('public/img/loader.gif')}}"></div>

<script>
    window.onload = function() 
    {
        //display loader on page load 
        $('.loader').fadeOut();
    }

</script>