Слайд-шоу с приоритетной загрузкой изображений

Я ищу виджет слайд-шоу, например. как плагин jQuery. Как это должно выглядеть, схематично (пунктирные прямоугольники — это изображения, которые изначально не видны, навигация с помощью кнопок со стрелками):

....  ....       +--+  +--+  +--+       ....  ....
.  .  .  .  [<]  |  |  |  |  |  |  [>]  .  .  .  .
....  ....       +--+  +--+  +--+       ....  ....

Требования:

  • Три видимых изображения должны загружаться как можно быстрее.

  • Нет типичной ленивой загрузки: изначально невидимые изображения должны загружаться автоматически и сразу после загрузки всех видимых изображений.

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

Предложения?


javascript html jquery performance page-load-time
person feklee    schedule 15.01.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Скрытые изображения: <img data-src="/images/image1.jpg">

После загрузки страницы выполните что-то вроде:

$(function () {
   $('img[data-src]').each(function () {
       var hImg = $(this),
           src = hImg.attr('data-src');

       hImg.attr('src', src);
   });
});

Плагин слайд-шоу должен быть включен только после этой функции document.ready, конечно.

person griffla    schedule 15.01.2013
comment
Умный! Я принимаю этот ответ на данный момент, так как он показывает решение проблемы, хотя и с большим количеством ручной работы, чем ожидалось. Если кто-то знает готовый виджет, реализующий этот или аналогичный метод, и опубликует его в качестве ответа, я могу изменить свое решение. - person feklee; 17.01.2013