How bad is this method for requesting images instead of AJAX?

Question

I have a thumbnail image list, all of them have an attribute of 'rel' which is the source of the same image in bigger size. My function is simple, if you click on a thumbnail image, the bigger size of it loads in a container. The interesting part of my code, which I need your feedback about, is this :

The variables:

'event.data.cImg' is the bigger image in the container which I want to update 'event.data.cImgWrap' is the container for the bigger image '$(this)' is the thumbnail image which was clicked

event.data.cImg.attr('src', $(this).attr("rel"));

  if (event.data.cImg.complete != 'true') {

      event.data.cImgWrap.css('opacity', '0.7');

      event.data.cImg.load(function() {
          event.data.cImgWrap.css('opacity', '1');
      });
  }

So what are the disadvantages of my code?

Sorry for my English, I'm not a native speaker and thanks in advance!

Answer 1

I cant think of one reason where you want to use ajax to load an image , unless the images are stored directly in the database as base64 encoded datas ( and not every browser support data urls ). the DOM has already everything you need to "monitor" image loading , so what the point using ajax to get an image ? a simple GET http request does the trick.

The only thing you would use ajax for is fetching the image url and metadatas like title ,etc from a list of images through a webservice ... as suggested before , the complete event is not supported everywhere.