Плагин JQuery для разбиения доменных имен для <img>

Question

Я читал отличную статью Стояна Стефанова о шардинге домена JS для файлов изображений и хотел улучшить его рецепт.

Приведенный ниже скрипт будет перебирать изображения на странице, назначая каждомув корзину, основанную на длине значения "src", и назначьте его в корзину (записав это на консоль).

Я пытаюсь создать плагин JQuery, который может приниматьнапример, $ ('img') или $ ('link') и переписать атрибут "src" с заштрихованным доменом, например "http://images1.mydomain.com/path/to/image.png".

Если моя страница имеет:

<img src="/Images/file1.png" />
<img src="/Images/filenumber2.png" />
<img src="/Images/footer.png" />

Я хочусделать что-то вроде:

$(document).ready(function(){
  $('img').domainShard(3, "subdomain", "mydomain.com")
});

Примерно произвести:

<img src="http://subdomain1.mydomain.com/Images/file1.png" />
<img src="http://subdomain2.mydomain.com/Images/filenumber2.png" />
<img src="http://subdomain3.mydomain.com/Images/footer.png" />

Используя плагин JQuery, например:

(function ($) {
    $.fn.domainShard = function (buckets, subdomain, domain) {
        var numBuckets =  buckets || 3;
        var subdomain = subdomain || "images";
        var domain = domain || "mydomain.com";
        return this.each(function () {
            // look at the src
                // var src = $(this).attr('src');
            // compute bucket assignment
                // do stuff
            // set the new path
                // newSrc = $(this).attr('src', path);
        });
    };
})(jQuery);

Вот JavaScript Стояна:

function getBucket(url, numbuckets) {
  var number = url.length,
  group = number % numbuckets;
  return group;
}

function toBuckets(stuff, numbuckets) {
  var numbuckets = parseInt(numbuckets, 10),
  url, group,
  buckets = Array(numbuckets),
  cache = {};
    for (var i = 0, max = stuff.length; i < max; i++) {
        url = stuff[i].src;

        if (typeof cache[url] === 'number') {
            continue;
        }
        group = getBucket(url, numbuckets);
        if (!buckets[group]) {
            buckets[group] = [];
        }
        buckets[group].push(url);
        cache[url] = group;
    }
    return buckets;
}

console.log(toBuckets(document.images, 3));

Я буду продолжать взламывать и сообщать, когда у меня будет что-то работать - любой совет или помощь очень ценятся.

Спасибо!

Answer 1

$(document).ready(function () {
            $("img").domainShared("striano.net", "images", true);
        });

        $.fn.domainShared = function (topDomain, subDomain, useSSL) {
            return this.each(function () {
                var _this = $(this)
                if (useSSL) {
                    _this.attr("src", "https://" + subDomain + "." + topDomain + _this.attr("src"));
                } else {
                    _this.attr("src", "http://" + subDomain + "." + topDomain + _this.attr("src"));
                }
            });
        }

Answer 2

Вы можете попробовать использовать протокол-относительный:

_this.attr("src", "//" + subDomain + "." + topDomain + _this.attr("src"));