كيفية تقديم التغذية الراجعة أثناء تحميل الصور المصغرة والتحكم في ترتيب التحميل

Question

وأنا بناء موقع على شبكة الانترنت مع حوالي 250-300 الصور المصغرة على صفحة واحدة، الواردة في 5 عناصر div المختلفة التي يمكن تمريره كل أفقيا.
أثناء مرحلة التحميل، ولكن، ولست بحاجة إلى أن تكون قادرة على انقر على الصورة المصغرة وتحميل صورة كاملة الدقة في العلبة الخفيفة.

ولقد نظرت إلى جايسون Buntings الإجابة في كيف لعرض حالة التحميل مع التحميل المسبق للوصور متعددة؟ حيث يحصل لي هناك نصف الطريق: أنه يعمل في 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');
  }
}

هل هذا مفهوم الصوت في الأساس أو أنا بعيدا؟ هل تعرف أي أسهل طريقة أفضل / للقيام بذلك؟

Answer 1

Is this a favorable way to do this, or are there better and faster possibilities?

One of the biggest speed improvements you will get is reducing the overall number of requests that you are making.

If you've got access to an image processing library on the server, it might be worth considering writing a script to render the all the thumbnails for each div into one large contact sheet image.

You could use an image map to figure out which full-res picture to display when the user clicks on the contact sheet (or you could possibly use a CSS sprite technique to render the correct thumbnail as a background on your link to the full-res picture, if you wanted to highlight the border of the thumbnail on mouseover).

HTH :^)

Answer 2

One suggestion: I would "default" max connections to 2 - its the most allowed in the HTTP/1.1 spec to the same domain anyway - so most browsers wont load more than 2 images at a time.