Change image src using jQuery

Question

I want to slide show of image on mouse over(all images in json array) and i need to change only img src. In this array image are in different size.Like some are 256X256 and some are 436x436.

but for large image its giving an error on firefox "Image corrupt or truncated: http://localhost/product/9cca72417668f1d813dcbc815a8ddb63.jpg"

i have a following code :

jQuery('.sales-product-images').on('mouseover',function(){
var counter = 0;
var selector = jQuery(this);
var pd_id = jQuery(this).attr('id');
var imageArray = jQuery.parseJSON(images);
var product_images= imageArray[pd_id];
default_image = product_images[product_images.length - 1];
timer = setInterval(function() {
  selector.fadeOut("slow",
  function () {
    if (counter === product_images.length) {
      counter = 0;
    }

    selector.attr('src', image_path_front + 'product/' + product_images[counter]);
      selector.show();
      counter = counter+ 1;
    });

  });

}, 2300);

I want show another image if one fully loaded or if not possible then Can i show loading image until other image not loaded.. Please help me.