需要优化网站的JavaScript代码

Question

嗨，嗨，我最近构建了一个站点，但是在某些jQuery函数中存在问题，某些.src函数并未完全加载在实时网站中。

当我鼠标鼠标时，图像需要4到5秒才能更改图像源。

这是我的代码.....

$(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"));
        }
    });

)}; )};

这是HTML代码.....

<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

而不是更换整个图像标签，我想最佳解决方案将是如果您只能加载所有图像，然后根据您的条件在hover和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

首先，您可以离开$(window).load功能并将函数直接插入$(document).ready。

第二，您的图像可能需要一段时间才能出现，因为它们必须从服务器上加载。它们的大小有多大？