Я создаю веб-сайт, содержащий около 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');
}
}
Это в основном разумная концепция или я отошел? Вы знаете какой-нибудь лучший / простой способ сделать это?