php / Ajax - лучшая практика для предварительной загрузки изображений

Question

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

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

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

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

1, вызывать каждый набор изображений через JSON (он должен быть быстрым?)

2, загрузите все возможные изображения в файл json и извлеките детали таким образом - хотя браузер все равно должен будет загрузить изображение. Плюс иногда может быть 4 изображения, иногда может быть до 1000!

3, Загрузите 10 изображений через php в Json или другой файл и загрузите все 10 изображений в браузер, скрывая 8, которые не отображаются, и всегда показывая средние два. Проблема здесь в том, что каждый раз, когда кто-то щелкает, файл должен перезагружать первое и последнее изображения, что по-прежнему занимает время, хотя я предполагаю, что средние изображения все же будут кэшироваться через браузер. Но все равно время загрузки есть.

4, возможно ли иметь изображение json со всеми деталями изображения (независимо от чисел) и использовать номер 3 выше для загрузки 10 из этих изображений, можно ли использовать ajax только для чтения 10 строк и сохранения указателя из последнего прочитанного файла, поэтому файл json может быть загружен быстро, с коротким обновлением и изображения с обеих сторон кэшируются через браузер !!

Надеюсь, это понятно, какие-нибудь предложения о том, как бы вы справились с этим?

Answer 1

Чтобы предварительно загрузить изображение из Javascript, вам не нужно делать ничего похожего на AJAX или JSON. Все, что вам нужно, это:

var img = new Image();
img.src = "http://example.com/new/image.jpg";

Браузер довольно успешно загрузит изображение в фоновом режиме, даже если оно нигде не отображается. Затем, когда вы обновите поле src другого (отображаемого) тега изображения, браузер немедленно покажет часть изображения, которое уже загружено (возможно, все).

Answer 2

Получение JSON через Ajax просто замедлит вас.

Вам лучше использовать встроенный JSON и сгенерированный Javascript.

 <?php 
       $images = array( "foo.jpg","bar.jpg" ); 
 ?>
 <script type="text/javascript">
   jQuery(function($){
       var images = ( <?php echo json_encode($images); ?> ); 
       /* Creating A Hidden box to preload the images into */
       var imgbox = document.createElement("div"); 
       $(imgbox).css({display: 'none'});
       /* Possible Alternative trick */
       /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */
       $('body').append(imgbox);

       $.each( images , function( ind, item ) 
       {
          #Injecting images into the bottom hidden div. 
          var img = document.createElement("img"); 
          $(img).src("/some/prefix/" + item ); 
          $(imgbox).append(img);
       });
    }); 
 </script>

Answer 3

Почему бы не использовать текст и заменить текст кодом изображения (работает в php действительно хорошо с ajax до 500 изображений и более)?

Answer 4

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

<script>
var urls = [
  "a.png",
  "b.png",
  "c.png",
  "d.png",
  "e.png",
  "f.png"
];

var currentStep = 0;
function loadResources()
{
  if(currentStep<urls.length){
  var url = urls[currentStep];
  var req = GetXmlHttpObject();
  update('loading ' + url);
  req.open("GET", url, true);
  req.onreadystatechange = getUpdateState(req, url);
  req.send(null);
} else {
  window.location = 'done.htm';
}
}

function getUpdateState(req, url) {
  return function() {
    var state = req.readyState;
    if (state != 4) { return; }
    req = null;
    setTimeout('loadResources()', 0);
  }
}
</script>

<!-- This will queue up to four concurrent requests.  Modern browsers will request up to eight images at time  -->
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">