Sozdaiblog.ru
Назад

Обновление контента без перезагрузки всей страницы!

Опубликовано: 09.12.2012
Время на чтение: 4 мин
81
837

Обновление страницы без перезагрузкиЗдравствуйте, дорогие друзья и читатели — Sozdaiblog.ru!

Сегодня я расскажу, как на WordPress осуществить загрузку контента без перезагрузки всей страницы сайта.

Для начала, давайте разберёмся, что это значит.

Моим примером будет социальная сеть Вконтакте.

До недавнего времени, мне было безразлично, как загружается данный сайт. Но, после того, как один из моих читателей показал пример и спросил – «Как сделать, чтобы на сайте осуществлялась загрузка контента без перезагрузки страницы?»,  я начал копать.

Моё внимание привлекла социальная сеть Вконтакте. Если, у Вас есть там аккаунт, то зайдите на свою страничку и покликайте по ссылкам навигации (Моя страница, Мои друзья, Мои фотографии и т. д.).

Обратите внимание, как осуществляется перезагрузка страницы.

Догадались? Нет?

Смотрите, обновляется только контент, а шапка сайта и панель навигации остаются на месте.

Интересно, правда?

А теперь, представьте, как такое обновление страницы без перезагрузки влияет на скорость сайта. Да он просто летает!

 

обновление страницы без перезагрузки

 

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

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

Надеюсь, что Вы отметили для себя все плюсы и теперь, мы переходим к главному.

 

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

Чтобы сделать загрузку контента без перезагрузки страницы сайта, нужно открыть файл header.php, который находится в папке с активной темой оформления и перед закрывающим тегом  < /head>, вставить следующий скрипт:

 

 

Извините, друзья, но воспользоваться скриптом могут только подписчики блога.

Чтобы стать одним из них, нужно заполнить наипростейшую форму подписки, указав имя и адрес электронной почты. Затем, на указанный Вами адрес, придёт письмо с подтверждением подписки на рассылку. После её подтверждения, тут же поступит новое письмо, в котором будет находиться ссылка на скачивание архива с исходным кодом скрипта.

 

 

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

На сегодня, это всё. До новых встреч…

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Сергей Москвитин
    Опубликовано: 09.12.2012 Ответить на сообщение

    Денис очень интересный момент. Надо попробовать на своем сайте. Действительно ли страницы загружаются быстро? Спасибо за очередное новшество. Я уже подписался хочу попробовать в деле. Успехов тебе в дальнейшем улучшении и продвижении своего сайта.

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Спасибо,Сергей!
      Да, страницы загружаются быстро, но нужно учитывать структуру сайта. Я не зря про контакт рассказывал!

  • Александр Красильный
    Опубликовано: 09.12.2012 Ответить на сообщение

    Сижу вот трескаю мандарины и знакомлюсь с твоей статьей Денис. Это отличный способ ускорить работу блога в несколько раз, вот только он подходит не всем темам для WordPress. Нужно будет провести эксперимент и узнать насколько он увеличит скорость загрузки блога. Заранее спасибо! =)

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Привет, Александр!
      Угости боевого товарища, с прошлого нового года не кушал мандарины.)
      Подходит он всем, просто темы нужно подстроить под него. К примеру перенести навигацию в видимую часть монитора и убрать по возможности верхний отступ у шапки. Посмотри пример контакта.

      • Александр Красильный
        Опубликовано: 09.12.2012 Ответить на сообщение

        Нет проблем, тебе почтой выслать или может в гости в Харьков приедешь? =)
        Кстати, а скрипт сам писал или где-то нашел?

        • Денис Черников
          Опубликовано: 09.12.2012 Ответить на сообщение

          Лучше бандеролькой, но боюсь испортятся!
          Скрипт нарыл!

  • Валерий
    Опубликовано: 09.12.2012 Ответить на сообщение

    Я буду пробовать)) Написал статью как разделить статью на части, данный скрипт был бы дополнением к статье)))

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Пожалуйста, пробуйте!

      • Impulse
        Опубликовано: 12.04.2013 Ответить на сообщение

        А если у меня сайт сидит на движке Instant Cms можно ли этот скрипт туда впихнуть и будет ли он работать?

        • Денис Черников
          Опубликовано: 13.04.2013 Ответить на сообщение

          Не могу знать, я не работал с этим движком.

  • Сергей
    Опубликовано: 09.12.2012 Ответить на сообщение

    У меня только шапка с верхним меню на месте стоит, сайтбар обновляется по старому. И шаблон чуток вниз съехал, но это ерунда, поправил в css. Пока оставлю, посмотрю как будет работать. Спасибо Денис.

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Пожалуйста, Сергей! Будьте внимательны и осторожны с вёрсткой, а то весь сайт уплывёт!))

  • Сергей
    Опубликовано: 09.12.2012 Ответить на сообщение

    Зря пыхтел с css, оказывается в скрипте не заметил лишнюю запятую, сам виноват, случайно видимо нажал. Еще раз спасибо.

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Это ничего, я раз 10 сайт ломал при вставке различных скриптов, потом ночами искал то запятую, то скобку.

  • Алексей Виноградов
    Опубликовано: 09.12.2012 Ответить на сообщение

    Денис, а чего себе не поставил скрипт?

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Он со слайдером не дружит! А слайдер жалко!

  • Алексей Виноградов
    Опубликовано: 09.12.2012 Ответить на сообщение

    попробовал у себя. что-то ноль реакции вообще. Что можно поправить в теме? куда хоть капать?

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Я у Вас был, всё работало, при переключении по пунктам меню шапка стоит на месте! Приглядитесь к контакту и Вы поймёте принцип его работы!

      • Алексей Виноградов
        Опубликовано: 09.12.2012 Ответить на сообщение

        Денис, ты что-то путаешь. Во-первых я пробовал на тестовом домене, а во-вторых страница полностью перезагружается

        • Денис Черников
          Опубликовано: 09.12.2012 Ответить на сообщение

          Я с двух компьютеров заходил, от жены и со своего! У Вас шапка на месте!

  • Ирина
    Опубликовано: 09.12.2012 Ответить на сообщение

    Спасибо. Значительно увеличилась скорость загрузки, над остальным придется еще поработать.

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Пожалуйста! А что Вы ещё хотите доработать?

  • БЛОGГЕР
    Опубликовано: 09.12.2012 Ответить на сообщение

    Подойдет ли этот скрипт моему блогу? (ссылка в профиле, тема создана в Artisteer 4).

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Сомневаюсь, но попробовать стоит!

      • БЛОGГЕР
        Опубликовано: 10.12.2012 Ответить на сообщение

        Что то не пойму, работает скрипт или нет. ссылка в профиле.

        • Денис Черников
          Опубликовано: 10.12.2012 Ответить на сообщение

          Работает, но у Вас сама по себе так долго грузится страничка, что не успеваешь понять. Попробуйте увеличить скорость своего ресурса применив материал с моего блога.

  • Михаил
    Опубликовано: 09.12.2012 Ответить на сообщение

    А кто подписан, тому как? Снова подписываться? Что-то я не нашёл форму входа

    • Денис Черников
      Опубликовано: 09.12.2012 Ответить на сообщение

      Так же заполните форму регистрации и получите ссылку на скачивание! Это займёт пару минут!)

  • Александр
    Опубликовано: 09.12.2012 Ответить на сообщение

    Отличная статья, некоторую полезную информацию я извлек для себя, из этого материала.

    • Денис Черников
      Опубликовано: 10.12.2012 Ответить на сообщение

      Рад, что Вы нашли для себя полезное! Заходите ещё!

  • Василий
    Опубликовано: 10.12.2012 Ответить на сообщение

    Денис, а если у меня на главной стоит слайдер, то этот скрипт будет работать?

    • Денис Черников
      Опубликовано: 10.12.2012 Ответить на сообщение

      Сомневаюсь, у меня из-за слайдера не хочет! Но попробовать стоит!

  • БЛОGГЕР
    Опубликовано: 11.12.2012 Ответить на сообщение

    Вопрос по размещению кода. Обязательно в хедере или можно в футер запихнуть?

    • Денис Черников
      Опубликовано: 11.12.2012 Ответить на сообщение

      Код запихивается перед тем, что Вы хотите динамично обновлять!

  • Александр Красильный
    Опубликовано: 12.12.2012 Ответить на сообщение

    Сегодня поставил себе этот скрипт. Вроде функционирует все нормально. Протестировав его, стали заметно быстрее грузится странички. Круто, мне аж понравилось! Спасибо.

    • Денис Черников
      Опубликовано: 12.12.2012 Ответить на сообщение

      Пожалуйста! Рад, что ты остался доволен. Про мандарины не забудь!)))

  • Татьяна
    Опубликовано: 12.12.2012 Ответить на сообщение

    Очередная полезная информация, спасибо, Денис! Буду пробовать, если опять не возникнет конфликта с темой((

    • Денис Черников
      Опубликовано: 12.12.2012 Ответить на сообщение

      пожалуйста, Татьяна! Пробуйте аккуратно!

  • Alex
    Опубликовано: 12.12.2012 Ответить на сообщение

    Денис, может быть вы знаете ответ на схожий вопрос:
    как сделать, чтобы после внесения изменений на обычную html страницу, посетителям сайта не приходилось нажимать f5? Ведь если они уже были на этом сайте, то страничка у них закэшировалась, и изменений они не видят (((

    • Денис Черников
      Опубликовано: 12.12.2012 Ответить на сообщение

      У меня есть статья, как автоматически обновлять css на стороне пользователя! Посмотрите через карту блога!

  • Дмитрий
    Опубликовано: 27.01.2013 Ответить на сообщение

    Не получилось ничего. Все равно грузится вся страница целиком, пробовал и так — getElementById ('contentBody'); заменил на getElementById ('content');, т.к. у меня . Подскажите что не так?

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

      Со слайдерами это не работает!

  • Дмитрий
    Опубликовано: 27.01.2013 Ответить на сообщение

    Может быть есть какие-нибудь другие варианты? Подскажите пожалуйста

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

      К сожалению других решений пока ещё не встречал!

  • саня
    Опубликовано: 27.01.2013 Ответить на сообщение

    function showContent (link) {
    var cont = document.getElementById ('contentBody');
    var loading = document.getElementById ('loading');
    cont.innerHTML = loading.innerHTML;
    var http = createRequestObject ();
    if ( http )
    {
    http.open ('get', link);
    http.onreadystatechange = function ()
    {
    if (http.readyState == 4)
    {
    cont.innerHTML = http.responseText;
    }
    }
    http.send (null);
    }
    else
    {
    document.location = link;
    }
    }
    // создание ajax объекта
    function createRequestObject ()
    {
    try { return new XMLHttpRequest () }
    catch (e)
    {
    try { return new ActiveXObject ('Msxml2.XMLHTTP') }
    catch (e)
    {
    try { return new ActiveXObject ('Microsoft.XMLHTTP') }
    catch (e) { return null; }
    }
    }
    }

    • Денис Черников
      Опубликовано: 28.01.2013 Ответить на сообщение

      Вы это пробовали?

  • Дмитрий
    Опубликовано: 28.01.2013 Ответить на сообщение

    Для этого кода, как я понимаю необходимо создать событие OnClick на пунктах меню с функцией ShowContent, но в таком случае, получается открывается вся страница целиком внутри Content зоны. Как выдергивать в ВордПрессе чистые страницы/записи не задевая шапки и подвала?

  • Юрий
    Опубликовано: 09.02.2013 Ответить на сообщение

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

  • Александр
    Опубликовано: 04.03.2013 Ответить на сообщение

    Спасибо Денис! Не зря заглянул к Вам на блог. Скорость загрузки страниц значительно возросла!

    • Денис Черников
      Опубликовано: 04.03.2013 Ответить на сообщение

      Пожалуйста, Александр! Скорость, это один из существенных факторов ранжирования.

      • ilyas
        Опубликовано: 15.03.2013 Ответить на сообщение

        У меня такакая хрень , то есть не header файл а просто меню в отдельном файле , и оно выводиться через PHP на главной ... И я вставил после Но все ровно не подгружает , так же как и было обновляет страницу ( Подскажете что делать ? ) Я не менял скрипт просто скопировал и вставил ...

        • Денис Черников
          Опубликовано: 16.03.2013 Ответить на сообщение

          На словах я не смогу Вам подсказать. Если У Вас вся структура сайта работает по другому принципу, то нужно и делать по-другому. Для этого нужно копаться в коде, тестировать и смотреть, как и что будет получаться. На словах этого не сделать.

  • Надежда
    Опубликовано: 18.03.2013 Ответить на сообщение

    У меня не особо получается. Не пойму, чем нужно заменить contentBody и loading. Подскажите, пожалуйста.

    • Денис Черников
      Опубликовано: 18.03.2013 Ответить на сообщение

      С чего Вы взяли, что их вообще нужно изменять?

      • Надежда
        Опубликовано: 18.03.2013 Ответить на сообщение

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

        • Надежда
          Опубликовано: 18.03.2013 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 18.03.2013 Ответить на сообщение

            Это у многих так бывает!

          • Денис Черников
            Опубликовано: 18.03.2013 Ответить на сообщение

            А разве в этой статье, что-то подобное написано?

          • Надежда
            Опубликовано: 18.03.2013 Ответить на сообщение

            Я имею ввиду строки
            var cont = document.getElementById ('contentBody');
            var loading = document.getElementById ('loading');
            В скрипте, про который я говорю, изначально было так:
            var b1 = document.getElementById ('block-one');
            var b2 = document.getElementById ('block-two');
            И вот вместо 'block-one' и 'block-two' я вписывала 'content' и 'right'.
            Я подумала, что в скрипте, который вы описываете, нужно сделать аналогично.

          • Денис Черников
            Опубликовано: 18.03.2013 Ответить на сообщение

            Надежда, если это нужно было бы сделать разве я бы не написал про это!

  • Надежда
    Опубликовано: 18.03.2013 Ответить на сообщение

    Если скрипт не работает, значит он не подходит к моей теме?

    • Денис Черников
      Опубликовано: 18.03.2013 Ответить на сообщение

      Надежда, там много причин и одна из них несовместимость с темой.

  • Кирилл
    Опубликовано: 30.04.2013 Ответить на сообщение

    Поставил скрипт на свой сайт. НО ничего не работает. По-прежнему вся страница загружается.
    Видимо, дело в теме. Она у меня переделанная.
    Не подскажете, как скрипт под тему подогнать?
    Спасибо!

    • Денис Черников
      Опубликовано: 30.04.2013 Ответить на сообщение

      У Вас очень своеобразный сайт, здесь этот скрипт не поможет! Должно быть как В контакте без шапок, слайдеров и всего остального!

      • Кирилл
        Опубликовано: 30.04.2013 Ответить на сообщение

        А что такого у меня в шапке? По сути она одинаковая на всех страницах...
        Слайдер убирал — не помогло

        • Денис Черников
          Опубликовано: 30.04.2013 Ответить на сообщение

          Откройте сайт контакта и посмотрите их структуру шаблона! К примеру, у меня этот скрипт тоже не работает, но стоит убрать слайдер и сразу случается чудо!

  • Василий
    Опубликовано: 21.01.2014 Ответить на сообщение

    Ну и где скрипт??? Я подписался иииИИИИ???

    • Денис Черников
      Опубликовано: 22.01.2014 Ответить на сообщение

      Должно придти письмо на почту!

  • Alena
    Опубликовано: 24.01.2014 Ответить на сообщение

    У меня все работает (нет перезагрузки страницы) только при переходе на главную страницу меню (wordpress), при переходе на другие пункты меню перегружается вся страница.

    • Денис Черников
      Опубликовано: 24.01.2014 Ответить на сообщение

      У Вас сайт похож на VK?

      • Alena
        Опубликовано: 24.01.2014 Ответить на сообщение

        Да, меню (организовано в виде страниц инструментом wordpress). Задача в том, чтобы при переключении по элементам меню не выполнялась перезагрузка страницы. Причем, при переключении на главную страницу (http: //wordpress/), перезагрузка не происходит. Главная представлена не как страница, а как ссылка. Есть элементы меню, которые тоже представлены не как страницы, а как ссылки. И при переключении на них/с них явление перезагрузки — случайно. Пока не поняла логику работы скрипта, т.к. то работает, то нет...

        • Денис Черников
          Опубликовано: 24.01.2014 Ответить на сообщение

          Визуально это не всегда заметно!

          • Денис Черников
            Опубликовано: 24.01.2014 Ответить на сообщение

            Я пока не понимаю о чём мы говорим, если я даже сайт Ваш не вижу!

          • Alena
            Опубликовано: 25.01.2014 Ответить на сообщение

            Я его еще не разместила, упражняюсь с denwer (ом). Дело в том, что в wordpress, если организацию меню делать через страницы, то данный скрипт работать не будет. Если сделать ссылки на страницы, то вроде как пока все работает. Как выложу сайт на хостинг, кину ссылочку. Спасибо!

          • Денис Черников
            Опубликовано: 25.01.2014 Ответить на сообщение

            Пожалуйста! Дело не в страницах, а в структуре шаблона!

  • dima
    Опубликовано: 27.07.2014 Ответить на сообщение

    контент не скачивается

    • Денис Черников
      Опубликовано: 28.07.2014 Ответить на сообщение

      В смысле?

  • Эд
    Опубликовано: 09.10.2014 Ответить на сообщение

    а как сделать на сайте который сделан с нуля?

    • Денис Черников
      Опубликовано: 09.10.2014 Ответить на сообщение

      Почти так же, просто скрипты по другому подключать!

      • Эд
        Опубликовано: 09.10.2014 Ответить на сообщение

        а как? напиши статью или видео сделай как и куда что подключать

        • Денис Черников
          Опубликовано: 09.10.2014 Ответить на сообщение

          Пока нет времени, там всё по аналогии!

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.