Отображать загрузчик при загрузке страницы

Как отобразить загрузчик при загрузке страницы и скрыть его при загрузке?

$(document).ready(function() {
    $('.windowLoader').show().fadeOut(2000);
});

Отображает загрузчик спустя долгое время после начала загрузки страницы и иногда в течение 2000 мс продолжительности события fadeOut, завершившегося до загрузки страницы.

Есть ли способ выполнить отображение загрузчика, как только DOM будет готов, и оставить его видимым, пока страница не будет загружена (а не изображения), а затем скрыть загрузчик?


javascript preloader pageload
person Tapas Bose    schedule 22.08.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Почему бы не поместить загрузчик прямо в документ, а затем сразу удалить его с помощью jQuery? НАПРИМЕР.

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

$(document).ready(function() {
    $("#loading").fadeOut(function() {
        $(this).remove(); // Optional if it's going to only be used once.
    });
});

В противном случае, если вы делаете другие вещи в своем $(document).ready(), тогда .fadeIn() (/ show / create) свою панель загрузки вверху метода, выполните свой расширенный код, а затем внизу вызовите .fadeOut()

Как любезно предложено, если вы беспокоитесь о людях без JavaScript, просматривающих панель загрузки, также добавьте следующее:

<noscript>
    <style> #loading { display:none; } </style>
</noscript>
person Ian Clark    schedule 22.08.2013
comment
Хотя одним из недостатков является то, что мизерная часть посетителей, у которых отключен JS, навсегда застрянет на экране загрузки: P - person Terry; 22.08.2013
comment
Я не могу его удалить, он мне понадобится позже из других методов. Я могу это скрыть. - person Tapas Bose; 22.08.2013
comment
@TapasBose - О, хорошо, я просто добавил это, чтобы показать, что вам следует подумать об удалении одноразовых вещей. - person Ian Clark; 22.08.2013
comment
@Terry - хотя, если у вас будет панель загрузки, по-видимому, для того, что она загружает, потребуется JS! Но да, хорошая мысль хорошо сделана. - person Ian Clark; 22.08.2013
comment
@IanClark - document.ready запускается еще долго после начала загрузки страницы. Есть ли какое-нибудь событие, которое произойдет перед ним? - person Tapas Bose; 22.08.2013
comment
@TapasBose, насколько мне известно, вы обычно используете $(document).ready(), чтобы знать, что все ваши элементы DOM созданы. Если вы создадите этот элемент и поместите его в верхней части тела, возможно, это не проблема. Как и в случае, попробуйте использовать его вне метода .ready(), но только, если он не полагается на какие-либо загружаемые элементы. - person Ian Clark; 22.08.2013
comment
Честно говоря, я перестал обслуживать посетителей с отключенным JS ... это не очень хорошая практика, но тратить слишком много времени на сайт, не поддерживающий JS, может быть утомительно. - person Terry; 22.08.2013
comment
@Terry Hah - да, я полагаю, лучше прервать работу на странице 1, чем на странице 20, после того, как пользователь ожидает, что это сработает: P - person Ian Clark; 22.08.2013
comment
@IanClark Я бы тоже сказал, что уменьшит агонию :) но да, иногда мне приходится прибегать к методу <noscript> по соображениям совместимости или UX. - person Terry; 22.08.2013

arrow_upward
0
arrow_downward

это должно помочь настроить его в соответствии с вашим кодом

  $(document).ready(function () {
            // calculate height
            var screen_ht = jQuery(window).height();
            var preloader_ht = 5;
            var padding = (screen_ht / 5) - preloader_ht;
            jQuery("#preloader").css("padding-top", padding + "px");


            // loading animation using script 

            function anim() {
                jQuery("#preloader_image").animate({ left: '1px' }, 2000,
                function () {
                    jQuery("#preloader_image"), animate({ left: '1px' }, 2000);
                }
                );
            }
            //anim();
        });
    function hide_preloader() {
    // To apply Fade Out Effect to the Preloader 
    jQuery("#preloader").fadeOut(1000);
    }
    </script>
<style>
    #preloader {background: #1c1c1c;position:fixed;left:0px; top:0px; width:100%; height:100%; text-align:center;color:#fff;z-index: 100000000;}
    #preloader div {width:228px;height:240px;margin:auto;padding:10px 0;text-align:center;overflow:hidden;}
    #preloader_image {width:228px;height:240px;position: relative;left:0px;top:-10px;}
</style>
</head>

<body id="home" onload="hide_preloader()">
    <div id="preloader">
        <div>
            <div id="preloader_image">
                <img src="loading.gif" style="position: absolute;bottom: 0;left: 35%;">
            </div>
        </div>
    </div>
    </body>
person Deep Sharma    schedule 22.08.2013