如何在加载缩略图时提供反馈并控制加载顺序

我在单个页面上构建了一个包含5个不同div的大约250-300个缩略图的网站，每个div都可以水平滚动。
然而，在加载阶段，我需要能够点击一个缩略图并在灯箱中加载完整的图片。如何在加载缩略图时提供反馈并控制加载顺序

我看过Jason Buntings在How to display loading status with preloader and multiple images?的回答，它让我在那里得到了一半：它在IE中工作，但在FF中不工作，它不加载lightbox-image，直到加载所有缩略图。

所以我推出我自己的代码建立在相同的概念：它的工作原理，但不稳定（随机挂起），并使用吨的内存：

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'); 
    } 
}

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

来源

2009-08-02 wagi

对于更正的事件处理（执行处理程序一次，然后解除绑定），代码似乎是稳定的。但问题依然存在：这是否是一种有利的方式来做到这一点，还是有更好更快的可能性？ – wagi 2009-08-03 11:03:06

这是一个有利的方式来做到这一点，或有更好和更快的可能性吗？

您将获得的最大速度改进之一是减少您正在制作的请求的总数。

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

当用户点击联系表时，您可以使用图像映射找出显示哪个完整的res图片（或者您可以使用CSS sprite技术将正确的缩略图渲染为链接的背景如果您想突出显示鼠标悬停时缩略图的边框，则为全屏资源图片）。

HTH：^）

来源

2009-08-06 16:29:15

一个建议：我会将默认的最大连接数设置为2--它是HTTP/1.1规范中允许到同一个域的最大连接数 - 因此大多数浏览器一次不会加载超过2个图像。

来源

2009-08-03 00:17:25 gnarf

我得到了2％的改进（用萤火虫进行了描述），其中5个连接超过2个，这似乎是在最大化浏览器硬性限制内的吞吐量方面的甜点。但不可否认，我还没有通过高延迟链接尝试过它。 – wagi 2009-08-03 10:57:04

如何在加载缩略图时提供反馈并控制加载顺序

回答

相关问题