Loading image through Ajax?

Loading image through ajax! Is it possible? I thought it is possible before i really need to implement it. During some project there was a requirement to load a gif image through ajax. So i just simply tried

$('#popup-container').click(function() {
    type: "GET",
    url: "img/popup_calculating.gif",
    dataType: "image/gif",
    success: function(img) {
      i = new Image();
      i.src = img;
    error: function(error, txtStatus) {

But rather then getting  a image what i get was error !! It was parsererror. It mean browser is making request asynchronously and getting the data but its not able to understand the returned data. Because the dataType supported by ajax are  xml, html, script and json.

So what should i do? I should think how browser load images when i do something like this

<img title="myimage" src="myimage.png" alt="" >

Browser send the request to url specified in src property of img tag and load image asynchronously with image/png specified in contentType header request but in case of ajax it only accept xml, html, script, and json datatype.
So what should i do!! Think?

When browser already loading images asynchronously then why don’t i use that functionality. Just create a img tag on the fly and put the src property to url. Yeah i got the solution. So here is simple jquery plugin to load image asynchronously.

$.fn.image = function(src, f) {
  return this.each(function() {
    var i = new Image();
    i.src = src;
    i.onload = f;

Simply put this code in script tag or in js file. And to load image in a container call the image() function like this

  alert("The image is loaded now");

That’s it!


7 thoughts on “Loading image through Ajax?

    • It is possible but not directly using jQuery.ajax(). Actually when you put img tag then browser load the image asynchronously. If you want to load image through javascrit then create a img element using document.createElement(‘img’) and set its src property to url of image. XHR2 support the blob response type through which you can request for binary data like image. XHR2 these days supported in all major browsers but not below IE 10. Check here compatibility.

    • Hi cellard,
      On img element there is onerror event which will be triggered when image source doesn’t exists or if an error occurs when loading an image. You can call your function on this event. for example:

       <img src="image.png" onerror="imgErrorCallback(this);" />

      Here this refer to this img element on which the error occurred.

      function imgErrorCallback(image) {
          image.onerror = "";
          image.src = "/images/noimage.gif";
          return true;

      In image error callback you can unset the error callback so it doesn’t call again.

      Hope this may help.

  1. I have a problem.
    I use Bootstrap with a modal.
    I would like to load image to modal, but looks like the image not fit to modal even not if I add image-responsive class 😦

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s