用JavaScript縮放/縮放/調整多個圖像的最佳方法？

Question

我在div內有一個圖像列表和一個jQuery ui滑塊，當用戶滑動條時，應調整圖像的大小/縮放（無論您要調用什么），我嘗試選擇所有圖像並使用jquery更改css的寬度和高度。 它可以工作，但是速度很慢，而且流動性不是很好。

我讀到瀏覽器吸收調整大小的圖像，但是應該有一種方法可以提高性能或使其流暢，至少對於正在加載的圖像而言。

這是我的html標記：

<div class="file-list">
 <div class="file-cell">
    <div class="thumb-wrapper">
      <img width="100" height="100" title="mytitle" alt="myalt" src="image1.jpg">
    </div>
  </div>
  <div class="file-cell">
    <div class="thumb-wrapper">
      <img width="100" height="100" title="mytitle" alt="myalt" src="image1.jpg">
    </div>
  </div>
</div>

這是CSS代碼：

 div.file-cell {
    margin: 10px;
    float: left;
    padding: 8px;
    width: 100px;
    background: none;
    margin-bottom: 5px;
    cursor: pointer;
}

這是Javascript代碼：

jQuery().ready(function(){
var images = jQuery('.thumb-wrapper img'); //caches the query when dom is ready

jQuery( "#slider" ).slider({
    step: 13,
    min: 70,
    max: 200,
    value: 100,
    slide: function(event, ui){
              //i think if i return while resizing increases performace, 
              //confirm this please
              if(resizing) 
                     return;
               resizing = true;
               var size = CELL_WIDTH * ui.value / 100;
               size = size + 'em';
               images.css({
                     'width': size,
                     'height': size
               });
               resizing = false;
             }
    });                
    }

注意： 我應該刪除圖像的width和height屬性嗎？ 他們在那里是因為它們是由wordpress生成的。

Answer 1

滑塊中包含一個階躍值，專門使它不流暢。 滑塊將僅以步長為增量觸發值。 如果您希望看到較小的調整大小增量，則需要使step值更小。

而且，您在尺寸之間沒有動畫，因此從一種尺寸到另一種尺寸的變化充其量將是生澀的。 如果您希望從一種尺寸到另一種尺寸的平滑過渡，可以使用jQuery動畫從一種尺寸到另一種尺寸進行動畫處理。 即使這種動畫也不能保證是平滑的（取決於主機的功能），但它更有可能是平滑的。

您可以在此處看到帶有動畫的該實現的可行示例： http : //jsfiddle.net/jfriend00/eW53L/

您正在使用的resizing標志對您沒有任何幫助。 這段javascript是單線程的，並且不是異步的，因此在執行完此腳本之前，您不會再獲得另一個幻燈片回調，因此，大小調整標志實際上不會完成任何操作。

帶有動畫的代碼在這里：

jQuery(document).ready(function() {

    var images = jQuery('.thumb-wrapper img'); //caches the query when dom is ready
    var CELL_WIDTH = 5;
    var ASPECT = 1.5;

    jQuery( "#slider" ).slider({
        step: 5,
        min: 70,
        max: 200,
        value: 100,
        slide: function(event, ui) {
            var size = (CELL_WIDTH * ui.value / 100) + "em";
            images.stop(true).animate({width: size * ASPECT, height: size}, 250);
        }
    });

});​

如果圖像仍無法為您提供足夠平滑的動畫大小，則一種變通方法是僅對邊框輪廓進行動畫處理（使用更少的CPU進行動畫處理），然后，當用戶暫停移動滑塊一小段時間時，您可以將圖像更改為邊框輪廓的新大小。 這項技術通常在功能不強的計算機上使用。