Ajax, subdomains, 200 response, and images — ok?

Question

This is a very similar question to AJAX, Subdomains and the 200 OK response (and JavaScript Same Origin Policy - How does it apply to different subdomains?), but with a twist. I have a situation in which:

• A domain (www.example.com)
• Where the page at a subdomain (sd.example.com/cat/id)
• Needs to make ajax-style requests to another subdomain (cdn.example.com)

In contrast to the aforementioned question, what I am requesting is images.

• GET requests of images (using jQuery $.load())

This seems to be working just fine. Because it was working just fine, when someone pointed out it was generating errors in Firebug the same-origin policy didn't immediately occur to me.

• Images ARE loading at localhost (apache VirtualHost url of test.sd.example.com/cat/id)

However, now that it has come to mind thanks to that question I linked, I am concerned that this will not work reliably in production.

• Will this continue to work in a production environment -- and will it work reliably cross-browser?

Answer: No -- it only looked like it was working; it wasn't really

• If not, how do I fix it? (I don't think I can JSONP images...can I?)

Answer: Continue setting src of image & wait to show until load event triggered.

• If so, how do I stop the Firebug errors? If I can. (They're scaring fellow devs.)

Answer: Same as above -- get rid of step where actually doing GET request for image file.

Initial Code

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

Why not insert the images into the page by creating image elements and setting the src. what could be simpler?

edit: ... via javascript

I'm not sure this is exactly right, but in jquery:

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

Answer 2

Checkt this post: JavaScript Same Origin Policy - How does it apply to different subdomains?