웹 사이트를위한 자바 스크립트 코드를 최적화해야합니다

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에 직접 기능을 삽입하십시오.

둘째, 서버에서로드해야하기 때문에 캐싱되지 않은 이미지가 나타날 때까지 다소 시간이 걸릴 수 있습니다. 크기가 얼마나 큽니까? 대신 전체 이미지 태그를 대체