Кажется, что нет никакой встроенной поддержки предварительной загрузки изображений в galleryView . Из спецификации:
Я посмотрю на предварительную загрузку изображений в следующей версии
Так что вы должны свернуть свои собственные.
Посмотрите на функцию jQuery .load().
Показать первое изображение после его загрузки, затем загрузить остальные в фоновом режиме.
Допустим, первое изображение в id = first
$(function() { // <== doc ready
// do something after first image is loaded
$("#first").load( /* show the first image */ );
// do something after all images loaded
$("img").load( /* do the main gallery loop */ )
});
Измените вышеперечисленное по мере необходимости. Допустим, вы хотите показать первое большое изображение и первые 5 миниатюр и т. Д.
Вот как бы я начал. Я думаю, что это будет выглядеть более гладко, если вы предварительно загрузите не только первое изображение, но и столько изображений, сколько потребуется, чтобы заполнить первый ряд больших пальцев.
Показать временное div только с одним изображением, пока все изображения не загрузятся:
HTML:
<div id="temp"></div>
<div id="photos" class="galleryview">
<img id="first" ... />
<img ... />
<img ... />
<img ... />
...
</div>
JS:
$(function() { // <== doc ready
var $photos = $("#photos"), $temp = $("#temp"),
$first = $("#first");
// Hide gallery:
$photos.hide();
// show temp when 1st img loaded
$first.load( $temp.append( $first.clone() ) );
// To make things look smooth you can also make
// a quick gallery view out of temp. This only has 1 image.
$temp.galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100,
});
// do full gallery when all imgs loaded
$("img").load(
// remove the temp gallery
$temp.remove();
// show gallery
$photos.galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100,
});
);
});