Загрузка...

Прелоадер до загрузки страницы

Показываем прелоадер на страницах сайта, до его полной загрузки, реализация плавного исчезновения гифки и появление контента


Опять же по мотивам вопроса, для тех кто также не может найти никакой инфы по этому поводу.

HTML:

<!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>

CSS:

#wrapper {
    opacity: 0;
}

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

JS:

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)
    }, 1000)
});


Похожие заметки:

Простое модальное окно на jQuery

Простой пример реализации модального окна, которое должно закрываться по клику вне области окна и быть открытым при кликах в нем

Открыть здесь

Найти сумму произведений всех простых чисел

Найдите сумму произведений всех простых чисел, меньших 200, на их порядковые номера, считая, что первым простым числом является 2

Открыть здесь


Перед тем как писать комментарии, рекомендую ознакомиться:

Markdown синтаксис »

Оформление кода »

Нужна аватарка »

Комментарии


2
avatar

Петр сказал 10-03-2017 в 12:23


А почему в примере надпись при загрузке идет а как анимированную картинку сделать


avatar

Петр сказал 10-03-2017 в 12:39


Может примеры с зарузкой есть у вас можете прислать на почту, спасибо