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;
             }
    });                
    }

注意： 我应该删除图片的宽度和高度属性吗？他们在那里是因为他们是通过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动画），然后，当用户暂停移动滑块一段时间时间，您将图像更改为边框轮廓的新大小。这种技术通常用于功能较弱的计算机时代。

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

1 个答案: