Размещение статических изображений на поддомене при использовании 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.

0 ответов

Другие вопросы по тегам