1

我正在建立一个网站，在一个页面上包含大约 250-300 个缩略图，包含在 5 个不同的 div 中，每个 div 都可以水平滚动。
但是，在加载阶段，我需要能够单击缩略图并将全分辨率图片加载到灯箱中。

我看过 Jason Buntings 在How to display loading status with preloader and multiple images? 中的回答？这让我走到了一半：它在 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');
  }
}

这是一个基本合理的概念还是我离题了？你知道任何更好/更简单的方法吗？

4

2 回答 2

0

一个建议：我将“默认”最大连接数设为 2——无论如何，它是 HTTP/1.1 规范中最多允许到同一域的——所以大多数浏览器一次不会加载超过 2 个图像。

于 2009-08-03T00:17:25.097 回答
0

这是一种有利的方式，还是有更好更快的可能性？

您将获得的最大速度改进之一是减少您发出的请求总数。

如果您可以访问服务器上的图像处理库，则可能值得考虑编写一个脚本来将每个 div 的所有缩略图呈现为一个大的联系表图像。

您可以使用图像映射来确定当用户单击联系表时要显示哪个全分辨率图片（或者您可以使用 CSS 精灵技术将正确的缩略图渲染为指向全分辨率链接的背景图片，如果您想在鼠标悬停时突出显示缩略图的边框）。

:^)

于 2009-08-06T16:29:15.130 回答