Как предварительно загрузить более одного, но не все изображения слайд-шоу с помощью jquery

Question

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

Я пытался использовать jQuery Cycle Plugin (http://malsup.com/jquery/cycle/) с функцией типа addSlide, но не знаю, как заставить его работать.

Может ли что-то подобное сработать? -Слайдшоу начинается -изображение воспроизводится -preloader попытается загрузить до следующих 60 изображений -playback будет ожидать полной загрузки следующего изображения в строке, но не будет ждать всех 59 других.

Порядок воспроизведения / предварительной загрузки важен для этого приложения.

Answer 1

У меня нет точного кода для использования, но я могу объяснить структуру. Я сделал что-то очень похожее в jQuery - хотя я бы сказал, что это не столько jQuery, сколько Javascript. Вот основы того, что я сделал ...

Создайте функцию, которая «предварительно загружает» изображение. Способ сделать это в Javascript - просто создать элемент Image, например:

  `function preloadAnImage(src) {
    var i = new Image(1020, 492);
    i.src = src;
  }`

Создать список изображений, например. imagesToPreloadIndex = ['image1.jpg','image2.jpg'... ];

Создайте функцию, которая работает с этой очередью, например:

function preloadNextImage() {
    preloadAnImage(imagesToPreload.pop());   
    if (imagesToPreloadIndex.length > 0) {
      setTimeout(preloadNextImage, 300);
    }
  }

Это дает вам основу.

Вы хотите, чтобы это синхронизировалось с фактическим отображением изображений. Это работает нормально, пока все идет хорошо. Затем вам нужно решить, что делать, если вы отстаете в загрузке ... вы бросаете кадр или замедляете слайд-шоу? Я не знаком с плагином, который реализует эту стратегию, но было бы интересно реализовать.

Answer 2

• Вы можете создать функцию, которая предварительно загружает N изображений, когда N изображений загружается, она снова вызывает себя. Сколько стоит N? может быть 5 или 10, или вы можете придумать формулу для расчета N на основе ожидаемых размеров изображений / размера и продолжительности отображения
• Если размеры всех изображений практически одинаковы, первое запрашиваемое для загрузки изображение должно заканчиваться сначала, поэтому не будет ждать всех остальных 59.
• плюс переменная «loadedN », которая содержит индекс последнего загруженного изображения
• FireBug, безусловно, необходим для отладки этого приложения.
• Функция воспроизведения должна проверить, загружен ли запрошенный индекс изображения или нет

Answer 3

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

Чтобы это работало в js, вам нужно создать буферный объект, который может приостанавливать и возобновлять воспроизведение всякий раз, когда количество предварительно загруженных изображений падает ниже / превышает минимальный порог; как флэш-фильмы.

Answer 4

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

Вы запускаете инициализатор. Как только N изображений предварительно загружены (вы можете показать страшный экран «буферизации» на этом этапе), вы вызываете 2 функции.

Функция 1 - показывает изображение, затем запускает таймер, после чего он вызывается снова, чтобы показать следующее изображение. С 4 изображениями в секунду он будет вызывать себя каждые 250 мс.

Функция 2 - запускает таймер. Здесь вы можете работать с «ожидаемыми значениями». Можно ожидать, что, например, 60 изображений будут обработаны через 15 секунд. Итак, через 7 секунд вы начинаете загружать следующие 30 или 60 изображений и добавляете их в массив изображений, в то время как другая функция все еще показывает уже существующие изображения.

Конечно, вам нужен ограничитель для функции 1, который останавливает воспроизведение на элементе Nth-1, чтобы избежать переполнения стека или ошибок ввода / вывода.

Не знаю, было ли это полезно, но я так понял вопрос.