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


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


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

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

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

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

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

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

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

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

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

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

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

 

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

 

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

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

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

 

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

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

 

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

 

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

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

 


Ваш e-mail: *
Ваше имя: *
Подписчиков:


 

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

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

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




81 комментарийА что думаете Вы?

  1. Сергей Москвитин

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

    [Ответить]

    Денис Черников ответил:

    Спасибо,Сергей!

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

    [Ответить]

  2. Александр Красильный

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

    [Ответить]

    Денис Черников ответил:

    Привет, Александр!

    Угости боевого товарища, с прошлого нового года не кушал мандарины.)

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

    [Ответить]

    Александр Красильный ответил:

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

    Кстати, а скрипт сам писал или где-то нашел?

    [Ответить]

    Денис Черников ответил:

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

    Скрипт нарыл!

    [Ответить]

  3. Валерий

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Impulse ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  4. Сергей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  5. Сергей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  6. Алексей Виноградов

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  7. Алексей Виноградов

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Алексей Виноградов ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Ирина

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. БЛОGГЕР

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    БЛОGГЕР ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  10. Михаил

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  11. Александр

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  12. Василий

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  13. БЛОGГЕР

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  14. Александр Красильный

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  15. Татьяна

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  16. Alex

    Денис, может быть вы знаете ответ на схожий вопрос:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  17. Дмитрий

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  18. Дмитрий

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  19. саня

    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; }

    }

    }

    }

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  20. Дмитрий

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

    [Ответить]

  21. Юрий

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

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

    [Ответить]

  22. Александр

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    ilyas ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  23. Надежда

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Надежда ответил:

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

    [Ответить]

    Надежда ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    Денис Черников ответил:

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

    [Ответить]

    Надежда ответил:

    Я имею ввиду строки

    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'.

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

    [Ответить]

    Денис Черников ответил:

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

  24. Надежда

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  25. Кирилл

    Поставил скрипт на свой сайт. НО ничего не работает. По-прежнему вся страница загружается.

    Видимо, дело в теме. Она у меня переделанная.

    Не подскажете, как скрипт под тему подогнать?

    Спасибо!

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Кирилл ответил:

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

    Слайдер убирал — не помогло

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  26. Василий

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  27. Alena

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Alena ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Alena ответил:

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

    Денис Черников ответил:

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

  28. dima

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

    [Ответить]

    Денис Черников ответил:

    В смысле?

    [Ответить]

  29. Эд

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Эд ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

Оставить комментарий!

Вверх