Визуализация скрытых частей формы после пожаров DOM

Question

У меня есть пара страниц на моем сайте, где довольно большие куски текста переключаются с помощью JQuery и / или обычных вкладок Javascript.

На данный момент производительность хорошая, но я осознаю потенциалдля деградации по мере роста трафика на моем сайте.Хорошая часть заключается в том, что 80% содержимого страницы не видно в самом начале - пользователь должен щелкнуть что-либо, чтобы увидеть остальное содержимое.

Есть ли способ получитьстраница, отображаемая при загрузке 20%, а остальные загружаются в своем темпе?(К вашему сведению, я в порядке с Javascript, но я полный новичок в AJAX.) Разница во времени, вероятно, составляет несколько десятых секунды, но, как вы знаете, это может быть все.:)

Answer 1

Вы можете визуализировать основные части страницы при загрузке, а затем использовать Javascript или jQuery для выполнения асинхронных обратных вызовов, чтобы загрузить оставшиеся недостающие части в качестве скрытых html-элементов.Событие загрузки DOM, которое работает во всех браузерах, заключается в использовании jQuery.Это фреймворк, облегчающий работу с JS и DOM.У них есть несколько очень хороших учебников на странице Документы .Чтобы выполнить код javascript после завершения загрузки DOM, вы используете

$(document).ready(function(){
   // Your code here
 });

, а для выполнения запросов ajax вы можете использовать метод ajax .Документы довольно хорошо объясняют, как это работает.Затем при успешном обратном вызове вы можете использовать селекторы и другие методы, чтобы перехватить ответ обратно в DOM.У вас есть множество вариантов здесь append, appendTo, prepend, prependTo, insertBefore, insertfAfter.Вы можете найти документацию по методам на сайте jQuery, на который я ссылаюсь.

Answer 2

Вы на правильном пути: AJAX - способ сделать это. Основной подход будет:

1. Переместите каждый из скрытых предметов в свой частичный.
2. Написать контроллер действие, чтобы сделать каждый из них обертоны.
3. Внутри основного вида используйте AJAX для вызова каждого из этих действий и вставьте результаты (т.е. предоставил частичные) в соответствующие места на странице.

Этот последний шаг может происходить по-разному. Если вы уверены, что пользователь выполнит действие, которое в итоге откроет эти частичные значения, вы можете выполнять вызовы AJAX при загрузке страницы (т. Е. Внутри $ (document) .ready (function () {...}); ). Или, если вы хотите позволить пользователю подождать немного дольше, но уменьшить нагрузку на сервер, вы можете сделать вызов AJAX, когда пользователь выполнит действие.

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