Ajax、子域、200 响应和图像 — 可以吗？

Question

这是一个非常相似的问题 AJAX、子域和 200 OK 响应 （和 JavaScript 同源策略 - 它如何应用于不同的子域？），但有一个转折。我遇到这样的情况：

• 域名 (www.example.com)
• 页面位于子域 (sd.example.com/cat/id)
• 需要向另一个子域（cdn.example.com）发出ajax式请求

与上述问题相反，我要求的是图像。

• 图像的 GET 请求（使用 jQuery $.load()）

这似乎工作得很好. 。因为它工作得很好，所以当有人指出它在 Firebug 中生成错误时，我并没有立即想到同源策略。

• 图片 是 在 localhost 加载（test.sd.example.com/cat/id 的 apache VirtualHost url）

然而，现在由于我链接的问题而引起了我的注意，我担心这在生产中无法可靠地工作。

• 这会吗 继续 在生产环境中工作——它能跨浏览器可靠地工作吗？

回答：不——仅此而已 看起来 就像它正在工作一样；这不是真的

• 如果没有，我该如何解决？（我不认为我可以 JSONP 图像...可以吗？）

回答：继续设置图像的 src 并等待显示，直到触发加载事件。

• 如果是这样，我该如何阻止 Firebug 错误？如果我能。（他们吓坏了其他开发人员。）

回答：与上面相同——去掉实际对图像文件执行 GET 请求的步骤。

初始代码

function(imageUrl, placeTarget){
 var i = new Image();
 var img = $(i);
 img.hide()
 .load(imageUrl, function(e){
  // console.log("loadImage: loaded");
  placeTarget.attr("src", imageUrl);
  return true;
 })
 .error(function(){
  // error handling - do this part
  // console.log("loadImage: error");
  return false;
 });
 return;
} // loadImage

Answer 1

为什么不通过创建图像元素并设置 src 将图像插入页面中？还有什么可以更简单呢？

编辑：...通过 JavaScript

我不确定这是否完全正确，但在 jquery 中：

img = $('<img>');
img.attr('src', 'http://somewhere.com/some_image.jpg');
$('#place_to_add').append(img);
img.ready(fade_into_next);

Answer 2

检查这个帖子： JavaScript 同源策略 - 它如何应用于不同的子域？