Есть ли способ «контролируемой» предварительной загрузки изображений (возможно, с помощью jQuery)? - PullRequest
Новая
       25

Есть ли способ «контролируемой» предварительной загрузки изображений (возможно, с помощью jQuery)?

0 голосов
/ 09 августа 2011

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

  1. При загрузке слайд-шоу отображается первое изображение и изображения начинают загружаться в фоновом режимев порядке 2, 3, 4, ...
  2. Если пользователь решит переключиться на изображение n (что можно сделать с помощью поиска или превью или ...) и сработавшей предварительной загрузки (из 1.) didn 'Если еще не загрузить n, порядок (2, 3, 4, ...), установленный в 1., будет реорганизован с n в качестве первого элемента.

Другая возможность для 2. может состоять в том, чтобы приостановить предварительную загрузку, загрузить изображение n и продолжить предварительную загрузку, но я бы предпочел первую идею, потому что это даст вам свободу более сложного повторного заказа, например(n, n + 1, n + 2, ..., последний, 1-й не загружен, 2-й не загружен, ...).

До сих пор я делал простой цикл предварительной загрузкивот так: 

for (var i = 0; i < issue.pages.length; i++)
{
  log("preloading image from URL " + issue.pages[i].imageUrl);
  var img = new Image();
  img.onload = function()
  {
    log("reading loading image " + this.src);
  };
  img.src = issue.pages[i].imageUrl;
}

, который работает нормально, но, кажется, блокирует загрузку других изображений: если я вызываю 

imageN = new Image();
imageN.src = issue.pages[n].imageUrl;

где-то еще (onClick of thumb), пока изображения цикла все еще загружаются, imageN не будет загружен до того, как его очередь из цикла в порядке.

Есть идеи?

Ответы [ 2 ]

1 голос
/ 09 августа 2011

Насколько мне известно, нет способа остановить или приостановить загрузку изображения с помощью JavaScript.Тем не менее, аккуратным способом управления порядком загрузки изображений будет объединение их событий загрузки.Вот пример (с использованием jQuery).

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

function loadNextImage() {
    if (imgQueue.length > 0) {
        var imgN = new Image();
        imgN.src = imgQueue.shift();
        $(imgN).load(function(){
            $("#main").append(imgN);
            loadNextImage();
        });
    }
}

Чтобы изменить порядок загрузки изображений, вы буквально просто переместите их вперед в imgQueue, например, если бы я хотел переместить изображение 5 вперед: 

imgQueue.unshift(imgQueue.splice(4,1));

Это не идеально, например, если изображения не являются большими, возможно, имеет смысл загружать их в группы.Кроме того, поскольку loadNextImage управляет очередью, которую вы не можете отслеживать изображения только по их первоначальному индексу, вам нужно сделать что-то необычное, например, сохранить их как хеши, чтобы вы могли найти их позже: 

var imgHashQueue = [
   {name: "name", url = "url"},
   ...
]
0 голосов
/ 09 августа 2011
...