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

Я создаю веб-сайт, содержащий около 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');
  }
}

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


person wagi    schedule 02.08.2009    source источник
comment
С исправленной обработкой событий (выполнить обработчик один раз, затем отвязать) код выглядит стабильным. Но остается вопрос: является ли это благоприятным способом сделать это или есть более эффективные и быстрые возможности?   -  person wagi    schedule 03.08.2009


Ответы (2)


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

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

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

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

HTH: ^)

person Gus Gollings    schedule 06.08.2009

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

person gnarf    schedule 03.08.2009
comment
Я получаю улучшение на 2% (профилированное с помощью firebug) с 5 подключениями по сравнению с 2, это похоже на сладкое место в отношении максимизации пропускной способности в рамках жесткого ограничения браузеров. Но по общему признанию, я еще не пробовал использовать это по ссылке с высокой задержкой. - person wagi; 03.08.2009
comment
Моя причина для предложения заключается в том, что вам нужно принудительно включить другое изображение в цепочку загрузки (щелкните по нему) - лучше просто дождаться завершения двух его работ, чем остальных трех, которые он ждал загрузки. Я думаю, что увеличение производительности, которое вы видите, может быть основано исключительно на количестве времени, которое требуется для постановки в очередь следующего запроса, не используемого для загрузки изображения, так что - прикоснитесь :) - person gnarf; 04.08.2009
comment
Хе-хе, конечно, я забыл про большое изображение и его позицию в очереди ... Спасибо. - person wagi; 04.08.2009