jQuery how to display image loader on click of image thumbnail

Question

I have written a jquery code for image gallery where there is a 1 large image and 4 small thumbnails. Need to display loader on the large image when clicking on small thumbnails.

please check with below working code.

  $('.img1 a').click(function(e){
                             var title = $(this).attr('title');
                              var y = 1; while(y <= 4) {

         if(title == "img"+y){
  e.preventDefault();
   $(".bg4").attr('src',"http://hmsholidays.fluidux.in/wp-content/uploads/world/big-img"+y+".jpg").fadeIn();
    if(y == 1){
        $('.text-info4').text('Lion Park - South Africa');
    }
    if(y == 2){
        $('.text-info4').text('Bayworld - South Africa');
    }
    if(y == 3){
        $('.text-info4').text('Victoria Falls - South Africa ');
    }
    if(y == 4){
        $('.text-info4').text('South Africa Coach Holidays & Tours');
    }
         }

     y++; }
                              });

 <img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/big-img1.jpg" class="bg4" alt="">

 <ul class="cs-thumb-list img1">
                            <li>
                                <a href="#" title="img1"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img1.jpg"
                                        alt=""></a>
                            </li>
                            <li>
                                <a href="#" title="img2"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img2.jpg"
                                        alt=""></a>
                            </li>
                            <li>
                                <a href="#" title="img3"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img3.jpg"
                                        alt=""></a>
                            </li>
                            <li>
                                <a href="#" title="img4"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img4.jpg" alt=""></a>
                            </li>
                        </ul>

<script type='text/javascript' src='http://hmsholidays.fluidux.in/wp-content/themes/hmsHolidays/js/jquery.js'></script>

Answer 1

$(document).ready(function(){
	$('.img1 a').click(function(e){
		$(".loading_img").show();
		
		var title = $(this).attr('title');
		var y = 1; while(y <= 4) {
			if(title == "img"+y){
				e.preventDefault();
				$(".bg4").attr('src',"http://hmsholidays.fluidux.in/wp-content/uploads/world/big-img"+y+".jpg").fadeIn();
				if(y == 1){
					$('.text-info4').text('Lion Park - South Africa');
				}
				if(y == 2){
					$('.text-info4').text('Bayworld - South Africa');
				}
				if(y == 3){
					$('.text-info4').text('Victoria Falls - South Africa ');
				}
				if(y == 4){
					$('.text-info4').text('South Africa Coach Holidays & Tours');
				}
			}
			y++; 
		}
		setTimeout(function() { $(".loading_img").hide(); }, 2000);
	});
})

.loading_img {
		display:none;
	}
	
	.main_img{
		position:relative;
	}
	.loader {
		background-color: transparent;
		left: 23%;
		position: absolute;
		top: 23%;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main_container">
	<div class="main_img"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/big-img1.jpg" class="bg4" alt=""></div>
	<div class="loader"><img src="http://chimplyimage.appspot.com/images/samples/classic-spinner/animatedCircle.gif" class="loading_img" alt=""></div>
</div>

 <ul class="cs-thumb-list img1">
	<li>
		<a href="#" title="img1"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img1.jpg"
				alt=""></a>
	</li>
	<li>
		<a href="#" title="img2"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img2.jpg"
				alt=""></a>
	</li>
	<li>
		<a href="#" title="img3"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img3.jpg"
				alt=""></a>
	</li>
	<li>
		<a href="#" title="img4"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img4.jpg" alt=""></a>
	</li>
</ul>
<script type='text/javascript' src='http://hmsholidays.fluidux.in/wp-content/themes/hmsHolidays/js/jquery.js'></script>

Answer 2

Cause your images are small size, even if you put a "loading" you will not see it.

You can test it with a timeout (https://www.w3schools.com/jsref/met_win_settimeout.asp)

but if you want a real "onLoadImage -> ChangeImage" check this plugin: https://github.com/alexanderdickson/waitForImages

For the loading state I use font awesome.

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

See the example in this page: http://fontawesome.io/examples/

So the logical programing is:

onClickImage
{
    ActualImage.Hide
    LoadingIco.Show

    SetTimeOut(2 seconds) //for development, but change for WaitForImages() plugin function
    {
        LoadingIco.Hide
        ClickedImage.Show 
    }
}

To center the fontAwesome icon use basic CSS:

#ParentOfTheIco{
    display: block;
    width: 100%; //Any width
    margin: 0 auto;
}

#parent{
border:1px solid black;
height: 20px;
padding: 20px;
}
#loading_ico{
border:1px solid red;
height: 20px;
width: 20px;
margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="loading_ico">
    
  </div>
</div>

Answer 3

you can simply add hidden gif img and show it with thumbnail click then hide when the big image is ready like

$("#loader").show();

$("#bigImage").ready(function(){
  $("#hide").show();
});

and place it with some css style like

#loader{
  //According to your style
  position:absolute;
  top:10%;
  left:50%;
}