Js/jQuery load alternative images synchronously?

You can find lot of links over Internet, how to load alternative images but most of them give examples of asynchronously loading not synchronously one. I was facing the same problem and it took around 4 hours for me to fix it and now it looks simple :)

Scenario 1(simple):
=======================
You have two images and want to show the 2nd one, in case 1st one is not valid.

Use following image tag:

<img src="'+src+'" onError="this.onerror=null;this.src=\'https://browshot.com/static/images/not-found.png\'" />; 

Note: Please don't forget to add this.onerror=null otherwise browser may stuck in a loop.


Scenario 1(typical):
=======================
You have three images:

1. Show image1 if valid otherwise image2.
2. If image2 is also invalid show 3rd one.

In this case we have to use above code as well as one more function for middle image.

Not working
--------------------
You can use following code in JS and looks like it will work but will not

var src = first_image_src
var image = new Image();
image.src = src;
if (image.complete) {  
}else{
src = second_image_src; 
}

<img src="'+src+'" onError="this.onerror=null;this.src=\'+third_image_sorce+'" />;

It will always show you first(if valid) or 3rd image(if 1st one not valid), not second one although valid one.

Reason: Above JS code makes an ajax GET asynchronous request to check whether the image is valid or not. It will not wait till the response comes due to it's single threaded feature.

Working solution
---------------------------
To solve above problem we have to either make an synchronous request or use asynchronous in such a way the it looks like request is synchronous one. 

Here is the code:

function getSecondImage(element, second_image_src){
    var image = new Image();
    image.src = second_image_src;
    image.onerror = function(){$(element).prop('onError',null)};  
    image.onload = function(){$(element).prop('src',second_image_src)};      
}

var img_tag = '<img src="'+src+'" onError="this.onerror=getSecondImage(this,\''+second_image_src+'\');this.src=\'+third_image_sorce+'" />';

1. It will first check whether 1st image is proper if it's fine, 1st image will be loaded.
2. If 1st image is not valid, getSecondImage method will be called.
3. getSecondImage method will check if second image is valid or not. If it's valid it will update src of the image and that image will be loaded otherwise returns null.
4. If getSecondImage returns null then third image will be shown.

That's it.

If need any mode clarification or facing issue with above code please come back to me with your valuable comments.

Thanks!!!!!!!! Enjoy Programming:)