Как сделать пока не прогрузится страницу не чего не показывать?

Question

[Alexander]

Как сделать пока грузится страницу показывать гифку загрузки ?
после того как подгрузилась скрыть.

Answer 1

[Дмитрий Новиков]

верстаете блок с position:fixed, 100% шириной и высотой, поверх всего сайта. фоном ставите ему гифку.
на событие $(window).load() вешаете плавное исчезновение этого блока (fadeOut).
это один из вариантов, можно и по-другому, но смысл тот же.

Comments

[Alexander]

$(window).load(function(){
$('div#canvasloader-container').css('display', 'none');
});
верно ?

[Дмитрий Новиков]

да, примерно так

[Alexander]

<style>
        body{
            display: none;
        }
    </style>

</head>
<img id="ls" src="484.GIF" alt="" style="position: absolute; top: 50%; left: 50%">
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/1649c230120151.561437e082267.jpg" alt="">
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/1649c230120151.561437e082267.jpg" alt="">
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/1649c230120151.561437e082267.jpg" alt=""><img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/1649c230120151.561437e082267.jpg" alt="">

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('img#ls').hide();
        $('body').css('display', 'block');
    });
</script>
Не пашет почему то.

[Aborrol]

Alexander: а где сам body? Оберните контент в него. В стилях кстати его скрывать не надо, просто оверлей поверх.