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>

you can just load the image and hide it then show it when on mouse hover — Jeric Cruz
– Jeric Cruz, Commented Apr 23, 2017 at 8:54
Remove the window.load call as you already have document load. You are both waiting for the page to finish loading then running your code after the page loads which is unnecessary. — Nathaniel Flick
– Nathaniel Flick, Commented Apr 23, 2017 at 8:58

Kiran Dash · Accepted Answer · 2017-04-23 09:12:38Z

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>

Bram · Accepted Answer · 2017-04-23 09:00:44Z

0

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?

answered Apr 23, 2017 at 9:00

Bram

2831 silver badge11 bronze badges

2 Comments

Nathaniel Flick Over a year ago

Probably shouldn't ask a question in an answer.

Bram Over a year ago

Correct, my bad. Could better be used in a comment.

Collectives™ on Stack Overflow

Need to Optimize javascript Code for website

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related