Preloading Arrays using Javascript

Try preloading your images like this:

$(function(){

      //let's preload some images
      $.fn.preload = function() {
         this.each(function(){
             $('<img/>')[0].src = this;
         });
     }

     $([
       '/assets/images/prices_img/289_on.gif',
       '/assets/images/prices_img/389_on.gif',
       '/assets/images/prices_img/489_on.gif',
       '/assets/images/howitworks1.gif',
       '/assets/images/howitworks2.gif',
       '/assets/images/howitworks3.gif',
       '/assets/images/not_signs.gif',
       '/assets/images/socal_coverage.gif',
       '/assets/images/property_info_steps/a_on.gif',
       '/assets/images/property_info_steps/b_on.gif',
       '/assets/images/property_info_steps/c_on.gif',
       '/assets/images/property_info_steps/d_on.gif',
       '/assets/images/property_info_steps/e_on.gif',
       '/assets/images/property_info_steps/f_on.gif',
       '/assets/images/property_info_steps/g_on.gif',
       '/assets/images/property_info_steps/h_on.gif',
       '/assets/images/property_info_steps/i_on.gif',
       '/assets/images/property_info_steps/j_on.gif',
       '/assets/images/browseimage.gif',
       '/assets/images/ajax-loader.gif',
       ]).preload();

});

Modify the array for you images accordingly. Good luck!

EDIT: Add the following just before clearInterval(changeBGImageInterval);

         //let's preload some images
         $.fn.preload = function() {
            this.each(function(){
                $('<img/>')[0].src = this;
            });
        }

        $(image_array).preload();

So the entire modified code will look like this:

 $(document).foundation();     

 var image_array = new Array();
 var counter = 0;
 var changeBGImageInterval;
 var delay = 3000; //default     

 $(document).ready(function(){
   console.log("Ready");     

   $("#hashtagSearchForm").submit(function(event){
     var idelay = parseInt($("input[name=delaybox]").val());     

     if(isNaN(idelay) === false){
       delay = idelay * 1000; // convert seconds to milliseconds (setInterval requirement)
     }else{
       delay = 3000; // set to default if no input
     }     

     console.log("Fetching images with #" + $("input[name=hashtagbox]").val());
     console.log("Delay: " + delay + " milliseconds");     

     // AJAX part
     $.post(
       "fetchInstagramImages.php",
       {
         'hashtag' : $("input[name=hashtagbox]").val()
       },
       function(data){
         // This is triggered after the request has been completed. This is custom code.
         // data = response data of request. In this case: echo json_decode($myArray);     

         var images = JSON.parse(data);
         image_array = []; // clear array;
         $(images).each(function(count){
           image_array.push(images[count]);
         });     

         //let's preload some images
         $.fn.preload = function() {
            this.each(function(){
                $('<img/>')[0].src = this;
            });
        }

        $(image_array).preload();

         // reset timed event first
         clearInterval(changeBGImageInterval);     

         // for the timed event
         changeBGImageInterval = setInterval(
           function(){
             $("body").css("background-image", 'url(' + image_array[counter] +')');
             // console.log(image_array[counter]);
             counter++;
             if(counter == 20){counter = 0;}
           },
           delay // 3 seconds
         );     

       }
     );
     event.preventDefault();
   });
 });