javascript - 使用 Javascript 缩放/缩放/调整多个图像大小的最佳方法？

Question

我在 div 和 jquery ui slider 中有一个图像列表，当用户滑动栏时，图像应该调整大小/缩放(无论你想怎么调用它)，我尝试选择所有图像并更改 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;
             }
    });                
    }

注意: 我应该删除图像的宽度和高度属性吗？它们之所以存在是因为它们是由 wordpress 生成的。

Answer 1

你的 slider 中有一个步长值，这使得它不流畅。 slider 只会以您的步骤增量触发值。如果您希望看到较小的调整增量，则需要减小 step 值。

而且，尺寸之间没有动画，因此从一种尺寸到下一种尺寸的变化充其量也将是不稳定的。如果您希望从一种尺寸更平滑地更改为下一种尺寸，可以使用 jQuery 动画从一种尺寸到下一种尺寸进行动画处理。即使这个动画也不能保证流畅(这取决于主机的能力)，但它更有可能流畅。

您可以在此处查看带有动画的实现的工作示例:http://jsfiddle.net/jfriend00/eW53L/

您使用的调整大小标志对您没有任何帮助。这段 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 进行动画处理)，然后当用户暂停移动 slider 一段时间时此时，您将图像更改为新的边框轮廓尺寸。这种技术在计算机功能较弱的时代经常使用。