サブドメインに CNAME を付けた tumblr で retina.js を動作させようとしています。
したがって、tumblr が推奨するように、CNAME を使用して blog.benwhitla.com が benwhitla.tumblr.com を指しています。通常のインライン画像と @2x 静的インライン画像の両方をホストし、retina.js を使用して Retina ディスプレイに Retina 画像を自動的に表示したいと考えています。retina.js が機能するには、画像が js ファイルと同じドメインまたはサブドメインにある必要があります。
これに関する retina.js の議論をここで見つけてください: https://github.com/imulus/retinajs/issues/40
この考え方に従って、サブサブドメイン i.blog.benwhitla.com を作成しました。retina.js は現在のドメインのサブドメインにある画像を取得できるはずなので、これが機能することを期待していました。
ここでのテスト: http://benwhitla.com/client/retina/
最初のイメージは外部でホストされており、機能しません - これは予想されることです。2 番目のイメージは、html および js と同じ場所にあり、正常に動作します。3 番目の画像は、技術的には benwhitla.com のサブドメインである i.blog.benwhitla.com でホストされているため、Retina 画像がプルされることを期待していましたが、そうではありません。
retina.js がサポートするには 2 つのサブドメインが多すぎるのではないでしょうか?
何か案は？私はこれで2日間壁に頭をぶつけています。
また、次のようなすべて (css、画像、および 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 画像が存在しない場合はエラーが発生するようになりました。