Beste Möglichkeit, mehrere Bilder mit Javascript zu vergrößern/verkleinern/skalieren?

Question

Ich habe eine Liste von Bildern innerhalb divs und einem jquery ui Schieberegler, wenn Benutzer die Leiste verschiebt die Bilder sollte Größe/Zoom (was auch immer Sie es nennen möchten), ich habe versucht, alle Bilder und Ändern der CSS Breite und Höhe mit jquery. Es funktioniert, aber es ist sehr langsam und nicht sehr flüssig.

Ich habe gelesen, dass Browser die Größe von Bildern saugt, aber es sollte eine Möglichkeit geben, die Leistung zu verbessern oder es flüssig zu machen, zumindest mit den Bildern, die geladen werden.

Hier ist mein HTML-Markup:

<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> 

Hier ist der Code CSS:

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

Hier ist der Code 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; 
      } 
    });     
    } 

Hinweis:sollte ich Entfernen Sie die Attribute Breite und Höhe für das Bild? Sie sind da, weil sie mit WordPress erzeugt wurden.

Answer 1

Ihr Schieberegler hat einen Stufenwert, der es speziell NICHT flüssig macht. Der Schieberegler wird nur Werte in Schritten Ihres Schritts auslösen. Wenn Sie kleinere Größenanpassungen sehen möchten, müssen Sie den Wert step kleiner machen.

Und Sie haben keine Animation zwischen den Größen, so dass die Änderung von einer Größe zur nächsten wird am besten ruckeln. Wenn Sie eine reibungslosere Änderung von einer Größe zur nächsten vornehmen möchten, können Sie die jQuery-Animation verwenden, um von einer Größe zur nächsten zu animieren. Selbst diese Animation ist nicht garantiert glatt (es hängt von den Fähigkeiten des Host-Computers ab), aber es ist eher wahrscheinlich glatt.

Sie können ein funktionierendes Beispiel dieser Implementierung mit Animation sehen hier: http://jsfiddle.net/jfriend00/eW53L/

Die resizing Flagge Sie verwenden wird Sie in keiner Weise zu helfen. Dieser Teil von JavaScript ist single-threaded und nicht asynchron, so dass Sie keinen weiteren Slide-Callback erhalten, bis dieser fertig ausgeführt ist, so dass das Ändern der Größe nicht wirklich etwas bewirkt.

Dieser Code mit der Animation ist hier:

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

});​ 

Wenn die Bilder immer noch nicht Größe für Sie animieren glatt genug ist, dann ein Work-around ist nur eine Grenze Umriss zu animieren (die mit viel beseelt weniger CPU) und wenn der Benutzer die Bewegung des Schiebers für eine kurze Zeit anhält, ändern Sie die Bilder auf die neue Größe des Umrisses. Diese Technik wurde oft in den Zeiten von weniger leistungsfähigen Computern verwendet.