使用Javascript缩放/缩放多个图像的最佳方式？

我有一个divs和一个jQuery UI滑块内的图像列表，当用户滑动图像应该调整大小/缩放（无论你想调用它），我试图选择所有的图像和改变CSS的宽度和高度使用jquery。它可以工作，但是非常缓慢而且不流畅。使用Javascript缩放/缩放多个图像的最佳方式？

我读过浏览器吸取调整大小的图像，但应该有一种方法来提高性能或流动，至少与正在加载的图像。

这里是我的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产生。

来源

2012-03-31 Skatox

你的滑块有一个步骤值，它特别使它不流畅。滑块只会以步幅为单位触发值。如果你想看到较小的调整大小增量，那么你需要减小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），然后，当用户暂停移动滑块一段时间后，将图像更改为边框轮廓的新大小。这种技术经常用在功能不太强大的电脑上。

来源

2012-03-31 15:50:44 jfriend00

谢谢！有效！在过去的几天里，我一直在为此苦苦挣扎。我有点新来的JavaScript，所以我怀疑resize变量不工作。 – Skatox 2012-03-31 16:24:03

使用Javascript缩放/缩放多个图像的最佳方式？

回答

相关问题