Стоит ли и как сделать загрузку «изображений по запросу»?

Question

[Алексей]

У меня изображения собраны в галереи, которые обрабатываются скриптом.
В коде страницы видно только 1е изображение, остальные "спрятаны" за этим скриптом.
пример страницы
Так как изображения все равно спрятаны, возникла мысль что может тогда эти спрятанные изображения грузить по мере запросов (Клин на изображение или миниатюру) (покопавшись в коде плагина).
Вроде это должно привести к увеличению скорости загрузки страницы и уменьшению количества первоначальных запросов.
Но не приведет ли загрузка каждого (после 1го из галереи) "изображения по клику мыши" к дополнительной нагрузки на сервер?
Т.е. будут ли суммарная нагрузка и количество запросов равно или больше, если загружать по клику, по сравнению с "единовременной" полной загрузкой?

Answer 1

[Falseclock]

Мыслите правильно. Нагрузки никакой не будет.

Answer 2

[Stalker_RED]

Поздравляю, вы сделали сразу два изобретения.
1. Lazy load (ленивая загрузка) - ресурсы подгружаются не все сразу, а по мере надобности.
2. Preload (предварительная загрузка) - приложение предугадывает какие ресурсы ему вскоре понадобятся, и подгружает их заранее.

Во всяких серьезных галереях и слайдерах эти штуки давно есть, и они настраиваются.
preloadImages в bxSlider, например.

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

Comments

[Алексей]

Не совсем так.
1. Lazy load загружает только видимые на экране изображения. В случае когда изображения грузятся скриптом наверное это не будет работать.
2. Preload наверное вообще прямо противоположный вариант. Как предугадать будет ли просмотрено следующее изображение в галереи?

[Stalker_RED]

selftrips: Никак не предугадать. Но есть разница:
1. не делать прелоад вообще, и каждый раз при смене изображения получать задержку
2. загрузить все 300 изображений сразу
3. делать прелоад для одного-двух следующих изображений, а остальные 297 пусть пока побудут на сервере.

[Алексей]

Ок,
1.а как организовать прелоад только 1-2 изображений, если они выводятся скриптом?
2. Изображения не обязательно последовательно просматриваются, можно и в произвольном порядке, по клику на миниатюру. Выход, может быть в том чтобы грузить по "первому клику" всю галерею, раз начали просматривать, скорее всего просмотрят всю.
Но как это реализовать?

[Stalker_RED]

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

Иначе, очевидно, нужно вносить правки в сам скрипт. Скрипт знает какая картинка сейчас на экране. Есть адреса картинок, которые идут следом. Подгружаем:

var newImg = document.createElement('img')
newImg.src = '//example.com/image42.jpg'

И вставляем в нужное место в слайдере. Примеров в интернетах полно.

[Алексей]

Миниатюры это вроде другое изображение.

<!-- Start Advanced Gallery Html Containers -->
			<div class="thumbs_wrap2">
				<div class="thumbs_wrap">
					<div id="thumbs_1622_2" class="thumnail_row " >
						<ul class="thumbs noscript">
									<li><a class="thumb" href="http://selftrips.ru/wp-content/uploads/2013/09/2013-09-29-v-evropu-na-mashine-den-14-zakopane-pol/DSC05870-1024x683.jpg" title="DSC05870" >								
											<img src="http://selftrips.ru/wp-content/uploads/2013/09/2013-09-29-v-evropu-na-mashine-den-14-zakopane-pol/DSC05870-100x75.jpg"  alt="Польша, Закопане - Словакия, купальня Chata Oravice -  Попрад."   title="Польша, Закопане - Словакия, купальня Chata Oravice -  Попрад."  />
										</a>
										
										<div class="caption">
											
														<div class="image-caption">Трамвайчик на польские Татры</div>
													
											
											<a class="pageLink next" style="display:none; opacity:0; cursor: default;" href="#" title="Next Page"></a>
											
										</div>
										
									</li>
								
									<li><a class="thumb" href="http://selftrips.ru/wp-content/uploads/2013/09/2013-09-29-v-evropu-na-mashine-den-14-zakopane-pol/DSC05872-1024x683.jpg" title="DSC05872" >								
											<img src="http://selftrips.ru/wp-content/uploads/2013/09/2013-09-29-v-evropu-na-mashine-den-14-zakopane-pol/DSC05872-100x75.jpg"  alt="Польша, Закопане - Словакия, купальня Chata Oravice -  Попрад."   title="Польша, Закопане - Словакия, купальня Chata Oravice -  Попрад."  />
										</a>
										
										<div class="caption">
											
														<div class="image-caption">Трамвайчик на польские Татры</div>
													
											
											<a class="pageLink next" style="display:none; opacity:0; cursor: default;" href="#" title="Next Page"></a>
											
										</div>
										
									</li>
								
						</ul>					
						
					</div>
				</div>
			</div>
			
			<!-- Start Advanced Gallery Html Containers -->

Видно что, для данной галереи, показываются все миниатюры с именами ххх-100x75.jpg и одно большое изображение с именем типа ххх-1024x683.jpg"