Need to Optimize javascript Code for website

Question

Hi every one recently i build a site but there is a problem in some jquery function , some .src functions are not loaded completely in live website.

when i mouseover the image it take 4 to 5 seconds to change source of image .

here is my Code.....

$(document).ready(function(){
$(window).load(function(){
    $(".leads-padding img").click(function(){
        var oldSource = $(this).attr("src");
        if ( $(this).hasClass("clicked-image") ){
            $(this).attr("src", oldSource.replace("-1-1.jpg", ".jpg"));
            $(this).removeClass("clicked-image");
        }
        else{
            $(this).attr("src",oldSource.replace("-1.jpg","-1.jpg"));   
            $(this).addClass("clicked-image");
        }
    });
    $(".leads-padding img").mouseover(function(){
        if ( !$(this).hasClass("clicked-image") ){
            var oldSource = $(this).attr("src");
            $(this).attr("src",oldSource.replace(".jpg","-1.jpg"));
        }
    });
    $(".leads-padding img").mouseout(function(){
        if ( !$(this).hasClass("clicked-image") ){
            var oldSource = $(this).attr("src");
            $(this).attr("src", oldSource.replace("-1.jpg", ".jpg"));
        }
    });

)}; )};

here is HTML code .....

<div class="col-sm-2 col-xs-4 leads-padding change-text" id="change-text6">
                <div class="margin-20">
                    <img src="../images/members/leads/waqas.jpg" class="img-responsive" id="img-leads6">
                </div>
                <div class="text-center leads">
                    <p>Name</p>
                    <p class="lead-designation">Des</p>
                </div>
            </div>
            <div class="leads-bio" id="txt6">
                <div class="col-md-8 col-xs-12 bio">
                    <h1 class="color-orange">Name</h1>
                    <p>Des</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
                </div>
            </div>

Answer 1

Instead of replacing the entire image tag, I guess the optimum solution will be if you can just load all the images and then show/hide them based on your condition (on hover and click).

jQuery(document).ready(function(){
    $(".leads-padding img").click(function() {
      $(".img-2").toggle();
      $(".img-1").toggle();
    });
    $(".leads-padding img").hover(function() {
      $(".img-2").toggle();
      $(".img-1").toggle();
    });
});

img {
  width: 200px;
  height: 200px;
}
.img-2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-sm-2 col-xs-4 leads-padding change-text" id="change-text6">
                <div class="margin-20">
                    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="img-responsive img-1" id="img-leads6">
                    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="img-responsive img-2" id="img-leads6">
                </div>
                <div class="text-center leads">
                    <p>Name</p>
                    <p class="lead-designation">Des</p>
                </div>
            </div>
            <div class="leads-bio" id="txt6">
                <div class="col-md-8 col-xs-12 bio">
                    <h1 class="color-orange">Name</h1>
                    <p>Des</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
                </div>
            </div>

Answer 2

First of all, you can leave the $(window).load function and insert your functions directly in the $(document).ready.

Second, your images might take a while to appear if not cached, because they have to be loaded from the server. How large are they in size?