Как сделать JQuery прелоадер на загрузку веб-страницы

Используя достаточно незамысловатую конструкцию с $(window).bind('load',function(){ }); можно реализовать простой вариант заглушки, которую будут видеть пользователи, переходя на страницу вашего веб-приложения, пока все элементы не будут загружены. Именно веб-приложения, потому что с обычным веб-сайтом это нецелесообразно по соображениям здравого смысла, потому как вряд ли сегодняшние посетители будут ждать даже пару десятков секунд пока загрузится какая-то там страницы с какой-то информацией.

jQuery(document).ready(function($) {

    var bodyH = $(window).height() / 2;
    $("body").after('<div id="system-load" style="position:fixed;'
            + 'top:0px; left:0px; background: #DDD; width:100%; height:100%;'
            + 'z-index:99999999; color:#fff; padding-top:' + bodyH + 'px;"'
            + 'align="center">'
            + '<img src="/sites/all/themes/blablabla/img/ajax-loader.gif"'
            + ' alt="Пожалуйста, подождите..." /></div>');
    $(window).bind('load', function() {
        $('#system-loading').fadeOut('slow').remove();
        $('#sytem-content').animate({opacity: 1}, 'fast');
    });

});

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

JQuery прелоадер на страницу

На значок ошибки JavaScript в нижнем левом углу Internet Explorer 8 не обращаем внимания — у меня там помимо этого прелоадера иные скрипты были запущены.

Опубликовано 17-10-2013 в 14:14


Комментариев к записи: 3

  1. Лузер:

    Уважаемый веб мастер если вы пишите статью будьте добры расписывать все по полочкам для лузеров, а не для програмистов. Я понимаю что вы что то знаете, но толком донести вашу мысль в данной статье у вас абсолютно не получилось а жаль

  2. $(document).ready(function(){
    //****************************Заглушка ***********************************************
        var bodyH = $(window).height() / 2;
        $("body").after(''
                + '');
        $(window).bind('load', function() {
            $('#system-load').fadeOut('slow').remove();
            $('body').animate({opacity: 1}, 'fast');
        });
    })
    

    А на тег body повесьте

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты