roblip
@roblip
Здесь может быть Ваша реклама

Как сделать preloader?

Знаю-знаю, было уже много подобных тем, но есть одна проблема, я нигде не могу, как создать прелоадер, который будет изначально появляться на фоне, и пропадет лишь тогда, когда сам полностью загрузится.
Есть допустим страница с текстом посредине. Как сделать, чтобы эта страница показывалась поверх той, которая загружается, до тех пор, пока главная страница не загрузиться. Мне не нужна визуализация зависимости прелоадера от подгрузки, которая регулируется просто задержкой.
Как сделать именно настоящую проверку прелоадера на загрузку всей страницы?
  • Вопрос задан
  • 10239 просмотров
Решения вопроса 2
alone_lion1987
@alone_lion1987
Веб-разработчик
Примерно следующим образом.

В самом начале скрываем допустим основной контент, который находится во враппере, ну к примеру задав прозрачность 0

#wrapper {
    opacity: 0;
}

#main_preload{
  position: fixed;
  width: 64px;
  height: 64px;
  left: 50%;
}


В разметке делаем страницу, которая будет отображаться пока идет загрузка, но мне проще ориентироваться будет на прелоадер (как то привычнее, но смысл реализации будет тем же). Поэтому сделаем пустой див #main_preload

Вообще разметка примерно следующего типа:

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<span id="main_preload"></span>
<div id="wrapper">
<!-- content -->
</div>
<script type="text/javascript" src="path/to/loader.js"></script>
</body>
</html>


Делаем скрипт loader.js, примерный код дернул со старого своего проекта (поэтому полностью на код ориентироваться не стоит), прелоадер (gif) будет крутится в центре экрана, пока не загрузится основной контент:

var preload = $("#main_preload"), 
    w = $(window).width() / 2 - 30, 
    h = $(window).height() / 2 - 30;
preload.html('<img src="/path/to/preload.gif" alt="load content."/>');
preload.css({"top": h + 'px', "left": w + 'px'});
$(window).load(function () {
    setTimeout(function () {
        preload.animate({opacity: "0"}, 50, function () {
            preload.html("")
        });
        $("#wrapper").animate({opacity: "1"}, 50)
    }, 250)
});


Суть в использовании $(window).load( ); setTimeout тут не помню уже зачем, вроде для какой то красивой задержки, но эта задержка не имеет ничего общего с основной загрузкой. Там плавный переход получается такой: прелоадер крутится, пока весь контент не будет загружен (и картинки и тд), потом идет плавное затухание прелоадера на прозрачность 0 и одновременное появление основного контента (прозрачность 1).

https://jsfiddle.net/sm2yfbxj/
Ответ написан
leshikgo
@leshikgo
Создаете в дереве html элемент прелоудера, стилизуете его так что бы он был на весть экран. Прописываете блоку контента display:none или ещё как-то скрываете его.
Дальше пишите скрипт:
$(window).on('load', function () {
    $('#ваш скрытый блок контента').css("display", "block"); // показываем блок с контентом 
    $('#ваш прелоудер').delay(350).fadeOut('slow'); // и скрываем сам блок прелоудера.
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы