Не загружайте часть HTML, пока кнопка не нажата

0

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

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

Для быстрого примера того, чего я пытаюсь достичь:
Перейдите на страницу http://iscs.nl/testpage_changecontent.html.

Содержимое div, которое не должно быть загружено при запуске, это #page_portfolio, которое будет показано нажатием кнопки #pagebutton_portfolio. Примечание. Эти идентификаторы не используются на тестовой странице вышеуказанной ссылки.

Спасибо, ребята, смотрите на код.

Теги:
load
hide

3 ответа

2
Лучший ответ

предполагая, что содержимое портфолио было в portfolio.html:

$('#tabcontent2').click(function(e){
  $('#content_1').hide();
  $("#content_2").show()
    // grab portoflio.html and place its contents within #content_2
    .load('portfolio.html');
  e.preventDefault();
});

Вы даже можете использовать data-* чтобы не перезагружать страницу (выборка один раз):

$('#tabcontent1').click(function(e){
  $('#content_2').hide();
  $('#content_1').show();
  e.preventDefault();
});
$('#tabcontent2').click(function(e){
  $('#content_1').hide();

  var $content2 = $("#content_2").show();

  // check if it been loaded before
  if (!($('#content_2').data('loaded') || false)){
    // grab portoflio.html and place its contents within #content_2
    $content2.load('portfolio.html', function(){
      // set the flag to say we've already loaded this content
      $content2.data('loaded',true);
    });
  }
  e.preventDefault();
});
Поделиться
  • 0
    Вау, это выглядит великолепно, приятель. Спасибо! Не проверял, но выглядит именно то, что я хочу. Идея внешнего контента (отдельные файлы .html для каждого контента) также предотвращает загромождение «одной страницы». Кажется отлично. Спасибо! После того, как я проверил это (и работает), вы наверняка получите большой палец вверх!
  • 0
    Какова цель || false в вашем чеке? Почему бы и нет: if (!$('#content_2').data('loaded')) ?
Показать ещё 5 комментариев
1

Используйте ajax для загрузки содержимого. Вам понадобится php файл, но он будет запущен только при запуске js-события.

Поделиться
  • 2
    Вам не нужен php-файл, просто контент на сервере, который вызов AJAX может извлечь (и отобразить). Это вполне может быть othercontent.html
  • 0
    Это правда. .php ext как-то приклеен к моему разуму :)
1

Вот одно простое решение специально для вас.

  1. Поместите два файла с контентом (без макета) на ваш сервер. Например, content1.html и content2.html

  2. замените существующий JS-код на этот:

    function replace(content) {
    $('#content').html(content);
    $('#content').show();
}

$('#tabbutton1').click(function() {
    $.get("content1.html", replace(content));
    $('#content').hide();
});

$('#tabbutton2').click(function() {
    $.get("content2.html", replace(content));
    $('#content').hide();
});

  3. наконец, замените ваши div с идентификаторами "content_1" и "content_2" на один div с id = "content":

    <div id="content">The text displayed until the user clicks any link</div>

С наилучшими пожеланиями.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню