如何在加載縮略圖時提供反饋並控制加載順序

我在單個頁面上構建了一個包含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

如何在加載縮略圖時提供反饋並控制加載順序

回答

相關問題