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中插入您的功能。

其次，如果没有缓存，您的图像可能需要一段时间才能显示，因为它们必须从服务器加载。它们的大小有多大？

需要针对网站优化javascript代码

2 个答案: