Я собрал сценарий, который очень похож на функцию flreamr photostream. Два миниатюры рядом друг с другом, и когда вы нажимаете следующую или предыдущую ссылку, в нее входят следующие (или предыдущие) два изображения.
В настоящее время при загрузке страницы загружаются два изображения. При первом использовании 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-файл можно загружать быстро, короткое обновление и изображения с обеих сторон кэшируются через браузер!
Надеюсь, это ясно, любые предложения о том, как вы справитесь с этим?
Чтобы предварительно загрузить изображение с Javascript, вам не нужно делать ничего похожего на AJAX или JSON. Все, что вам нужно, это:
var img = new Image(); img.src = "http://example.com/new/image.jpg"; Браузер довольно счастливо загрузит изображение в фоновом режиме, даже если он не отображается нигде. Затем, когда вы обновляете поле src другого (отображаемого) тега изображения, браузер сразу же покажет часть уже загруженного изображения (надеюсь, все это).
Извлечение JSON Via 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>
В случае, когда вы хотите одновременно загружать большее количество ресурсов, небольшая аякс может решить проблему для вас. Просто убедитесь, что заголовки кеширования таковы, что браузер будет использовать ресурсы для следующего запроса. В следующем примере я загружаю до четырех ресурсов одновременно.
<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();">
Почему бы не использовать текст и заменить текст кодом изображения (работает в php очень приятно с ajax до 500 изображений и более)?