Question

我正在尝试让retina.js处理一个tumblr，我已经CNAME了我的子域名。

所以我有blog.benwhitla.com使用CNAME指向benwhitla.tumblr.com，正如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，images和js），如：

//i.blog.benwhitla.com

但没有区别。

感谢您的帮助。

修改从使用上面链接的github问题实际支持子域的retina.js的分叉版本开始（我不能在stackoverflow中添加超过2个链接）。

但即使我将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图像，它现在会抛出错误。

使用retina.js在子域上托管静态图像

0 个答案: