Javascriptで複数の画像を拡大/縮小/拡大/縮小する最適な方法は？

Question

私はdivとjquery UIスライダーの中に画像のリストを持っています。ユーザーがバーをスライドさせると、画像のサイズを変更する/ズームする必要がありますが、私はすべての画像を選択してCSSの幅と高さを変更しようとしましたjqueryを使用します。それは動作しますが、非常に遅く、あまり流動的ではありません。

私はブラウザが画像のサイズを変更するのを読んでいますが、少なくとも画像が読み込まれている状態では、パフォーマンスを向上させる方法や流動的な方法があるはずです。ここで

は私の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; 
      } 
    });     
    } 

注：は私べき画像の幅と高さの属性を削除しますか？彼らはワードプレスによって生成されたのでそこにいます。

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の消費量が少なくなります）、ユーザーがスライダーの移動を一時停止すると、画像がボーダーアウトラインの新しいサイズに変更されます。この手法は、あまり強力でないコンピュータの時代によく使用されていました。