jQuery - динамическая загрузка контента, что наиболее эффективно?

Question

Мне интересно об этой вещи. Я начинаю кодировать веб-страницу, где я в основном хочу один и тот же дизайн. Где только содержание меняется. Поэтому я не хочу загружать целые новые страницы, где в основном одни и те же вещи загружаются снова и снова. Я хочу загрузить только содержимое.

Теперь мне представлены два возможных решения. Либо с помощью какого-либо слайдера контента jQuery. Где весь контент огромен, но я выбираю показывать только те части, которые хочу. А при переходе по ссылкам положение содержимого внутри div меняется.

Или другое решение, где у меня есть отдельный файл с огромным количеством файлов div. А когда щелчок по ссылкам в основном очищает div и загружает содержимое выбранного div из этого другого файла.

Какое решение будет лучшим? Мышление как в целом, так и в программировании? Я ожидаю довольно много PHP-программирования здесь, и я хочу также уменьшить объем загрузки, тем более что первоначальная загрузка сайта содержит несколько серьезных тяжелых изображений.

Answer 1

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

Вы можете легко упростить дизайн, перехватив все ссылки и сделав ajax-вызов, чтобы извлечь контент и вставить его в соответствующий контейнер. Предполагая, что каждая ссылка извлекает контент с другого URL-адреса, и этот контент вставляется в другой контейнер в зависимости от того, по какой ссылке щелкнули, вам просто нужно назначить каждой такой AJAX-ссылке несколько атрибутов:

Определите атрибут data-remote для каждой ссылки, который может загружать контент с помощью AJAX.

Определите еще один атрибут data-container, который указывает идентификатор контейнера, в который должен быть вставлен результат.

// this is the ajaxy link
<a id="test" data-remote="true" data-container="container-id" href="..">Load</a>

Наконец, примените обработчик кликов ко всем ссылкам, для которых установлен атрибут data-remote:

$('a[data-remote]').click(function() {
    var containerId = this.attr('data-container');
    var url = this.attr('href');
    $('#' + containerId).load(url);

    return false; // stop from navigating to the clicked link
});

Answer 2

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

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

Если вам на самом деле не нужно «скользить» контент, сделайте так, чтобы на ваших страницах были кэшированы все внешние ресурсы в браузере (весь CSS, весь JavaScript, все изображения загружаются извне), а на самой странице есть только (надеюсь максимально минималистичный с точки зрения тегов) HTML-контент. Таким образом, со всем, что находится в кеше, вы не увидите никакой дополнительной полосы пропускания, кроме самого контента, очень похожего на то, что вы получите, например, с помощью запроса ajax.

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