Asynchronous And Synchronous Ajax Calls

In jQuery ajax call, there’s an option called async. Let’s look at below example:

$.ajax{(
    url: your_url,
    type: "POST",
    async: true,
    dataType: "json"
)}

By default, all requests are sent asynchronously(this is set to true by default). If you need synchronous requests, set this option to false
Setting async to false means that the statement you are calling has to complete before the next statement in your function call be called. If you set async to true then that statement will execute and the next statement will be called regardless of whether the async statement has completed yet.
Note that cross-domain requests and dataType: "jsonp"requests do not support synchronous operation. Also as of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().
Try something like this

$.ajax({
    url: target,
    contentType:'application/json; charset=utf-8',
    type: 'POST',
    dataType: 'json',
    async : false,
    success : function(){
        console.log();
    },
    error: function(){
        console.log();
    }
});

Preload images with jQuery

$(function(){
    var cache = []; // declare array to store our images
    $.preLoadImages = function(){
        var args_len = arguments.length;
        for(var i = args_len; i--;){
            var cacheImage = document.createElement('img');
            cacheImage.src = arguments[i];
            cache.push(cacheImage);
        }
    };
 }); // call our predefined function $.preLoadImages('./images/sample1.png', './images/sample2.png'); 

Reference:

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript/