Как обеспечить обратную связь при загрузке миниатюр и контролировать порядок загрузки

Question

Я создаю веб-сайт с 250-300 миниатюрами на одной странице, состоящими из 5 различных блоков, каждый из которых можно прокручивать по горизонтали.
Однако на этапе загрузки мне нужно иметь возможность щелкнуть миниатюру и загрузить изображение в полном разрешении в лайтбокс.

Я смотрел на ответ Джейсона Бантинга в Как отобразить состояние загрузки с помощью предварительного загрузчика и нескольких изображений? , что и привело меня туда на полпути: он работает в IE, но не в FF, где он не загружает изображение лайтбокса, пока не будут загружены все эскизы.

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

function doLoadThumbnails(queue) {
  if (!queue.isEmpty()) {
    if (connManager.AcquireConnection()) {
        var imageLink = queue.dequeue();
        var loader = new Image();
        loader.onload = function() {
            imageLink.firstChild.src = imageLink.href;
            connManager.ReleaseConnection();
        }
        loader.src = imageLink.href;

        doLoadThumbnails(queue);
    } else {
        connManager.getEventObject().bind('connReleased', function(e) {
            window.setTimeout(function() {
                doLoadThumbnails(queue);
            }, 50);
            connManager.getEventObject().unbind('connReleased', arguments.callee);
        });
    }
  }
}

ConnectionManager выглядит так:

function ConnectionManager() {
  var eventObject = $('<span id="ConnectionManager"></span>').appendTo("body");
  var activeConnections = 0;
  var maxConnections = 5;

  this.getEventObject = function() {
    return eventObject;
  }

  this.isConnectionAvailable = function() {
    return activeConnections < maxConnections;
  }

  this.AcquireConnection = function() {
    if (activeConnections < maxConnections) {
        activeConnections++;
        return true;
    } else {
        return false;
    }
  }

  this.ReleaseConnection = function() {
    activeConnections--;
    eventObject.trigger('connReleased');
  }
}

Это в принципе здравая концепция, или я ухожу? Вы знаете какой-нибудь лучший / более простой способ сделать это?

Answer 1

  

Это выгодный способ сделать это, или   Есть ли лучшие и более быстрые возможности?

Одно из самых больших улучшений скорости, которое вы получите, - это сокращение общего количества запросов, которые вы делаете.

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

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

HTH: ^)

Answer 2

Одно предложение: я бы "по умолчанию" Максимальное количество подключений к 2 - в любом случае это самое допустимое в спецификации HTTP / 1.1 к одному домену - поэтому большинство браузеров не загружают более 2 изображений одновременно.