Размещение статических изображений на поддомене при использовании retina.js
Я пытаюсь заставить retina.js работать на Tumblr, к которому у меня есть CNAME мой поддомен.
Итак, у меня есть blog.benwhitla.com, указывающий на benwhitla.tumblr.com с использованием CNAME, как рекомендует tumblr. Я хочу разместить как нормальные, так и @2x статические встроенные изображения, и чтобы изображения сетчатки автоматически отображались на дисплеях сетчатки с помощью retina.js. Для работы retina.js изображения должны находиться либо в том же домене, что и файл js, либо в поддомене.
Найдите обсуждение retina.js по этому вопросу здесь: https://github.com/imulus/retinajs/issues/40
Следуя этой мысли, я создал субдомен: i.blog.benwhitla.com. Поскольку оказалось, что retina.js должен иметь возможность захватывать изображения в поддомене текущего домена, я ожидал, что это сработает.
Тестирование здесь: http://benwhitla.com/client/retina/
Первое изображение размещается снаружи и не работает - это ожидаемо. Второе изображение находится в том же месте, что и HTML и JS, и работает нормально. Третье изображение размещено на i.blog.benwhitla.com, который технически является поддоменом benwhitla.com, поэтому я ожидал, что изображение с сетчатки глаза вытянет, но это не так.
Возможно, два субдомена - это слишком много для поддержки retina.js?
Есть идеи? Я бился головой об стену на этом в течение 2 дней.
Я также попытался использовать относительные пути для всего (CSS, изображения и JS), как:
//i.blog.benwhitla.com
но это не имело значения.
Спасибо за помощь.
Изменить: Начиная с использования разветвленной версии retina.js, которая, как предполагается, на самом деле поддерживает субдомены из проблемы github, указанной выше (я не могу добавить более 2 ссылок в stackru пока).
Но он выдает следующую ошибку, даже если я определю document.domain как benwhitla.com.
XMLHttpRequest cannot load http://i.blog.benwhitla.com/img/benwhitla@2x.png. Origin http://blog.benwhitla.com is not allowed by Access-Control-Allow-Origin.
Редактировать Не разрешено отвечать на мой собственный вопрос здесь, так что вот где я сейчас нахожусь, это не очень хорошее решение, но оно по крайней мере вытягивает изображение:
Что ж, я уверен, что это неправильный путь, но, используя новый скрипт, который разрешает подкаталоги, и изменяя все FALSE на TRUE в этом разделе, он теперь работает. Хотя, может быть, сейчас это небезопасно?
RetinaImagePath.prototype.check_2x_variant = function(callback) {
var http, that = this;
if (this.is_external()) {
return callback(true);
} else if (this.at_2x_path in RetinaImagePath.confirmed_paths) {
return callback(true);
} else {
http = new XMLHttpRequest;
http.open('HEAD', this.at_2x_path);
http.onreadystatechange = function() {
if (http.readyState != 4) {
return callback(true);
}
if (http.status >= 200 && http.status <= 399) {
if (config.check_mime_type) {
var type = http.getResponseHeader('Content-Type');
if (type == null || !type.match(/^image/i)) {
return callback(false);
}
}
RetinaImagePath.confirmed_paths.push(that.at_2x_path);
return callback(true);
} else {
return callback(true);
}
}
http.send();
}
Кроме того, теперь выдается ошибка, если нет изображения @2x.