Как не загружать все изображения на странице при загрузке

Question

У меня есть страница со списком изображений jpg на странице.Div, содержащий изображения, скрыт и работает как источник изображений для плагина галереи изображений Galleria jQuery.Поэтому, когда я загружаю страницу, ее загрузка занимает много времени, поскольку она загружает все изображения.Есть ли способ не загружать все эти изображения при загрузке страницы, а только тогда, когда они нужны galleria?

Answer 1

Вы можете загрузить массив изображений JSON вместо того, чтобы помещать их в исходный код:

var data = [
    {
        image: 'img1.jpg',
        thumb: 'thumb1.jpg',
        title: 'my first image',
        description: 'Lorem ipsum caption',
        link: 'http://domain.com'
    },
    {
        image: 'img2.jpg',
        thumb: 'thumb2.jpg',
        title: 'my second image',
        description: 'Another caption',
        link: '/path/to/destination.html'
    }
];

$('#container').galleria({
    dataSource: data
});

Вы также можете добавить собственные эскизы:

<a href="big.jpg"><img src="thumb.jpg"></a>

Galleria признает оба способа допустимыми источниками данных.

Answer 2

Я не знаю, сможет ли он сотрудничать с вашим плагином Gallery, и как он работает, но есть плагин Lazy Loading для jQuery. Загружает изображения, когда они входят в окно просмотра. Может быть стоит посмотреть.

Кроме этого, вам придется настроить плагин галереи, чтобы загрузить содержащиеся в нем изображения, когда он показывает div. Одной из идей было бы дать всем изображениям свойство src, указывающее на прозрачный GIF 1x1:

<div class="hidden">
 <img id="image1" src="http://domain.com/images/1x1.gif">
</div>  

и сохранить массив JavaScript с реальными источниками изображений:

<script>
ImageSources = new Array();
ImageSources[1] = "http://domain.com/images/big_fat_image.jpg";
...
</script>

и присвоить действительное свойство src в тот момент, когда отображается div.

Answer 3

Демонстрационная страница jQuery image плагин ленивой загрузки , похоже, не работает для меня на FF3.6 на Mac. Я смотрел HTTP-запросы на вкладке «Сеть» Firebug, и я мог видеть все изображения, загруженные при загрузке.

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

Ваш HTML может выглядеть так:

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height"/>

и JS

$('img').asynchImageLoader();

Answer 4

Да, в зависимости от того, как вы загружаете Galleria, у вас есть несколько вариантов ..

Если вы загружаете его через js, вы можете загружать js динамически, так же, как Google Analytics загружает его js:

 (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

(конечно, изменить адрес JS-нагрузки)

Альтернативное решение, чтобы сохранить двустороннюю передачу js (особенно если она идет из другого источника и параллельна), не вызывайте .loadTheme до загрузки изображений.