需要優化JavaScript代碼的網站

喜逢一個最近我建立一個網站，但有一些jQuery的功能的問題，一些的.src功能不完全實況的網站加載。需要優化JavaScript代碼的網站

當我將鼠標放置在圖像它需要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>

來源

2017-04-23 Muhammad Sami

你可以加載圖像並隱藏它，然後顯示它當鼠標懸停 –

取出window.load呼叫因爲你已經有文件加載。您都在等待頁面完成加載，然後在加載頁面後運行代碼，這是不必要的。 –

而不是更換整個圖像標籤，我想最佳的解決方案將是，如果你可以負載的所有圖像，然後顯示/隱藏他們根據你的病情（上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>

來源

2017-04-23 09:12:38

首先，你可以離開$(window).load功能並直接在$(document).ready中插入您的功能。

其次，你的圖像可能需要一段時間才能顯現，如果不被緩存，因爲他們必須從服務器加載。他們的規模有多大？

來源

2017-04-23 09:00:44 Bram

可能不應該在答案中提出問題。 –

正確，我的不好。最好在評論中使用。 – Bram

需要優化JavaScript代碼的網站

回答

相關問題