0

I have some jquery to load an image in the background but I need to get some custom headers (generated with PHP) with further information about the image. Is there another way, I'm open to any ideas

var oldimg = $("#someimage");
var url = 'http://example.com/im[300x200].png';
var newimg = $("<img>").attr("src", url).load(function(){
    //do something with headers before replacing the image
    oldimage.replaceWith(newimg);
});

Edit: To clarify, I could read the image headers with this request but it would not be cached in the DOM. I need to load it in the DOM and read the headers.

var oldimg = $("#someimage");
var url = 'http://example.com/im[300x200].png';
$.ajax({
    url: url,
    success: function(data, textStatus, request){
        console.log(request.getResponseHeader('some_header'));
    }
});
Andy Gee
  • 3,149
  • 2
  • 29
  • 44
  • 1
    It is not clear what you're asking. Your code is changing the `src` attribute of an image, so that the browser loads it. But what with the `load` call? [`load()`](http://api.jquery.com/load) is used to "Load data from the server and place the returned HTML into the matched element." - something you wouldn't do to an `img` element unless I am missing something. – abl Jul 12 '14 at 19:52
  • The image is loaded from a CDN and it's resized and cropped, and sent with other meta data in the headers, such as original dimensions (not the cropped dimensions). In an ajax request I can access these headers but I can't with jquery load. – Andy Gee Jul 12 '14 at 19:55
  • As @abl says, it's unclear what you're asking. `.load(function)` [is deprecated](http://api.jquery.com/load-event/); if you meant [this `.load()`](http://api.jquery.com/load/) -- you can find info for loading images via ajax [here](http://stackoverflow.com/questions/10802312/) and [here](http://stackoverflow.com/questions/4285042/) – blgt Jul 12 '14 at 21:43

0 Answers0