jQuery UI yeniden boyutlandırılabilir aracını kullanırken genişliğini kontrol etmenin daha etkili bir yolu nedir?

Question

Yeniden boyutlandırılabilir bir kenar çubuğu olan bir site yapıyorum. Kullanıcı bu kenar çubuğunu yeniden boyutlandırdığında, kenar çubuğundaki simge ve metinlerin kenar çubuğunu daraltmasını isterim. Şu anda kenar çubuğunun genişliğinin belirli bir boyutun altında olup olmadığını kontrol etmek için if ifadesini kullanıyorum, ancak Mac'in Etkinlik İzleme Sürümü'ne baktığımda, kenar çubuğunu sürekli olarak yeniden boyutlandırdığımda Chrome'da çok fazla zorlanma olduğunu gösteriyor. Benim çözümüm işe yarıyor, ama bu konuda gitmenin daha etkili bir yolu olup olmadığını merak ediyordum.

HTML:

<div id = "home_left"> 
    <a href="#"><img src="images/image1.jpg" id = "profile_picture"/></a> 
    <p id = "profile_username">username</p> 
    <div class = "icon_container"> 
     <a href="#"><img src="images/image2.png" class = "profile_icons"/></a> 
    </div> 
    <div class = "icon_container"> 
     <a href="#"><img src="images/image3.png" class = "profile_icons"/></a> 
    </div> 
    <div class = "icon_container"> 
     <a href="#"><img src="images/image4.png" class = "profile_icons"/></a> 
    </div> 
</div> 

jQuery: Bu benim ile çalışıyorum budur

$(document).ready(function(){ 
    // Setting the left sidebar as resizable 
    $("#home_left").resizable({ 
     handles: "e", 
     maxWidth: $("#home_left").width(), 
     minWidth: 100, 
     resize: function() { 
      //Width of profile picture 
      $("#profile_picture").width($("#home_left").width() - 24); 

      //Appearance of username and icons 
      if($("#home_left").width() < 200) { 
       $("#profile_username").addClass("hidden"); 
       $(".icon_container").width($("#home_left").width()); 
      } 
      else { 
       $("#profile_username").removeClass("hidden"); 
      } 
     } 
    }); 
}); 

Fiddle: https://jsfiddle.net/mpjb19m7/

O oynamam kadar CPU kullanımını göstermiyor yeniden boyutlandırılan görüntü olmadığı için, tarayıcıda normalden çok daha fazla zorlanma olduğunu görebilirsiniz. Bu, jQuery UI'sinin mi, yoksa verimsiz bir şey mi yapıyorum?

Answer 1

Eğer Resizable Widget API işaretlerseniz, size sadece resize olay (yani kovacak sürekli beri ben, bu fark gerginlik kaynağı olduğunu tahmin olan) için değil, aynı zamanda start ve stop olaylar için geri aramalar bağlayabilir göreceksiniz .

Sadece yeniden boyutlandırma işleminin başına/sonuna yanıt vermek için kenar çubuğu kullanıcı arabirimine ihtiyacınız varsa, bu olayları dinlemenin sorununuzu çözebileceğini tahmin ediyorum.