Лучший способ увеличить / масштабировать / изменить размер нескольких изображений с помощью Javascript? - PullRequest
Новая
       18

Лучший способ увеличить / масштабировать / изменить размер нескольких изображений с помощью Javascript?

0 голосов
/ 31 марта 2012

У меня есть список изображений внутри divs и слайдер 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.

1 Ответ

5 голосов
/ 31 марта 2012

Ваш ползунок имеет значение шага, что делает его НЕ плавным.Ползунок будет запускать значения только с шагом вашего шага.Если вы хотите видеть меньшие приращения изменения размера, вам нужно будет уменьшить значение 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);
        }
    });

});​

Если изображения по-прежнему не будут достаточно плавно анимировать размер, то обходной путь должен анимировать только контур границы (который анимируется с гораздо меньшим количеством ЦП), а затем, когда пользователь делает паузуперемещая ползунок на некоторое время, вы меняете изображения на новый размер контура границы.Эта техника часто использовалась во времена менее мощных компьютеров.

...