Полная загрузка страницы jQuery?

Question

[Bazhenovdev]

Всем привет друзья! У меня к вам такой вопрос, много встречал сайтов.. когда на них заходишь, работает прелоадер с каким-то фоном, и потом когда страницы загрузилась полностью, прелоадер пропадал и у пользователя была уже полностью загруженная страница. Как такое реализовать?

Answer 1

[Сергей Горячев]

От сердца отрываю. Прелоадер нужно поместить сразу после открывающего body, чтобы не проскакивали незагруженные части страницы перед показом прелоадера.
Всё в одном блоке, чтобы удобней было ставить и удалять его при необходимости и стили, скрипты работали более корректно.

<!-- preloader -->
    <style type="text/css">
        .preloader_bg { position: fixed; background: rgba(15,15,15,1); width: 100%; height: 100%; top: 0; left: 0; z-index: 200; }
        .preloader_content { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 201; font-size: 14px; }
        .preloader_content span { display: block; margin: auto; text-align: center; text-transform: uppercase; color: rgba(225,225,225,1);}
    </style>
    <script type="text/javascript">
    $(function(){
        $('.preloader_bg, .preloader_content').fadeIn(0);
        $(window).load(function(){
            $('.preloader_bg').delay(250).fadeOut(1500);
            $('.preloader_content').delay(250).fadeOut(750);
        });
    });
    </script>
    <div class="preloader_bg"></div>
    <div class="preloader_content">
        <span>Идет загрузка...<br>Подождите...</span>
    </div>
    <noscript>
        <style>
            html, body { opacity: 1 !important; }
            .preloader_bg, .preloader_content { display: none !important; }
        </style>
    </noscript>
    <!-- /preloader -->

Comments

[AntohaRomaha]

полдня убил.. на решение.. копипаст Вашего кода - 5 сек делов. Все как надо. Спасибо!

[Сергей Горячев]

AntohaRomaha: скоро уж год ответу, а он ещё помогает людям) приятно) пожалуйста)

[Андрей]

Сергей Горячев, привет из 2020. =)

[Софья]

Сергей Горячев, вы бы знали, что спустя пару лет, ваш ответ очень помогает)))

Answer 2

[Lumore]

<div class="preloader">Loading</div>

.preloader {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
color: #fff;
z-index: 9999999;
}

$(document).ready(function() {
$('.preloader').fadeOut();
});

// либо

$(window).on('load', function () {
$('.preloader').fadeOut();
});

Answer 3

[Mr_Sergo]

<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
	<script type='text/javascript'>
		$(window).on('load', function () {
			$('#wrap_preloader').delay(500).fadeToggle(500);
		});
	</script>

<div id='wrap_preloader'>
		Идет загрузка...
	</div>

#wrap_preloader {
		width: 100%;
		height: 100%;
		position: fixed;
		margin: 0px auto;
		background: #282828;
		z-index: 9999;
		text-align: center;
		color: #fff;
		letter-spacing: 5px;
		font-family: arial;
		font-size: 50px;
		padding-top: 260px;
	}

Ответ написан уже давно но тем не менее. Скачал утилиту для изменения скорости интернета, попробовал поставить 50кб/сек.- сначала долго висит ПРЕЛОАДЕР, после полной загрузки страницы пропадает. Поставил 1000кб/сек.- прелоадер пропадает почти сразу. Работает прелоадер, вообщем, четко, как и должен. Может кому пригодится.