Динамически заменять данные в контейнере div

Question

Каким образом можно динамически загружать данные в контейнер DIV?

Предположим, у меня есть несколько фотографий на странице. При нажатии на изображение открывается экран DIV на экране (без обновления страницы), который содержит все комментарии для этого изображения.

На данный момент я отправляю запрос AJAX для загрузки комментариев из БД и выхожу их на другой странице. Затем я добавляю эти данные с помощью jQuery внутри контейнера DIV. Нажатие на другое изображение очищает контейнер, а новые данные загружаются в новый запрос AJAX.

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

Я вижу, что facebook изменяет URL каждый раз при выборе нового изображения. Может быть, они используют идентификатор из URL для загрузки данных без отправки запроса AJAX?

Может быть, когда данные загружены и выбрано другое изображение, лучше просто скрыть старые комментарии к изображениям на странице, а не удалять их? Чтобы повторное нажатие на изображение не потребовалось для перезагрузки его данных?

Answer 1

Вот идея о том, как избежать частых/повторяющихся аякс-запросов для одного и того же изображения.

Допустим, вы имеете функцию, чтобы сделать комментарии в вашем DIV, что acepts на réponse с сервера, например:

function displayComments(resp) { 
    //Do stuff 
} 

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

//We're probably better of using the wrapper (class/ID) of images to 
//delegate events since setting/unsetting data may cause problems 
//if we'd used bind on images directly 
$("imagesContainerSelector").on("click", "img", function() { 

    var $this = $(this); 

    //See if comments have already been fetched previously. 
    //If yes, we'd have stored them as that image's data and 
    //we'd now simply use that data to display the comments. 
    if ($this.data("comments")) { 

     displayComments($this.data("comments")); 
    } else { 
     //We've not fetched comments for this image yet, so, fetch it 
     $.ajax({ 
      url: '...', 
      data: '...' 
      //more options 
     }).done(function(data) { 
      //When done, display comments 
      displayComments(data); 
      //Set the resp as data for later use 
      $this.data("comments", data); 
     }); 
    } 
}); 

Answer 2

Если вы отреагируете < img> -Tag внутри некоторого div, чтобы изображения загрузились после того, как вы это сделаете. Если вы укажете одно и то же изображение два или более раза, изображение уже находится в кеше большинства браузеров. Вот почему вы можете просто сделать что-то вроде

$ ('# div'). Html ('< img src = "...">');

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

Если вы сохранили свои фотографии в какой-либо базе данных или в memcache, используйте кеширующие заголовки. Вы можете запрограммировать некоторый outputpicture.php? Id = 12345. В этом случае что-то вроде

header('Content-Type: '.get_img_type($data)); 
header('Content-Length: '.strlen($data)); 
header("Pragma: public"); 
$expires = 60*60*24*14; 
header("Cache-Control: maxage=".$expires); 
header("Last-Modified: Mon, 26 Jul 1984 05:00:00 GMT"); 
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT'); 

может помочь много.

Answer 3

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