Код JavaScript для вращения изображения на веб-странице


Как это выглядит на базовое вращение изображения? Что можно здесь улучшить?

<p>    
  <img src='images/rotation/dsc_0052.jpg' id='rotateImg0' alt='image rotation' />
  <img src='images/rotation/bilde1.jpg' id='rotateImg1' style='display:none;' alt='image rotation'  />
  <img src='images/rotation/bilde2.jpg' id='rotateImg2' style='display:none;' alt='image rotation' />
  <img src='images/rotation/bilde3.jpg' id='rotateImg3' style='display:none;' alt='image rotation' />
  <img src='images/rotation/bilde4.jpg' id='rotateImg4' style='display:none;' alt='image rotation' />
  <img src='images/rotation/dsc_0043.jpg' id='rotateImg5' style='display:none;' alt='image rotation' />  
</p>

  <script type='text/javascript'>
      var rotation = function () {
          var currentImage;
          var count = function () {              
              // Figure out how many images we have on the rotation          
              var x = 0;
              while (document.getElementById('rotateImg' + (x + 1).toString()))
                  x++;
              return x;
          } ();

          var hideImages = function () {
              // Hide all the images              
              for (var i = 0; i < count; i++) {
                  document.getElementById('rotateImg' + i.toString()).style.display = 'none';
              }
          };

          var showImage = function (number) {
              document.getElementById('rotateImg' + number.toString()).style.display = 'block';
          };

          var fn = {};
          fn.setupRotation = function () {
              // Show the first image
              currentImage = 0;
              showImage(currentImage);

              // Start the rotation
              var interval = setInterval("rotation.advanceRotation()", 4000);
          };

          fn.advanceRotation = function () {
              if (currentImage + 1 == count)
                  currentImage = 0;
              else
                  currentImage++;
              hideImages();
              showImage(currentImage);
          }

          return fn;
      } ();

      rotation.setupRotation();      
  </script>


5668
3
задан 3 ноября 2011 в 03:11 Источник Поделиться
Комментарии
1 ответ

Три вещи, которые я заметил:

1. Просматривая документ с методами DOM-это медленный процесс. Там часто нет пути вокруг него, и ничего не переночевать здесь, но постараться свести его к минимуму, когда вы можете. Из страница 183 из Стоян Стефанов по JavaScript для моделей:


Доступ к DOM-это дорого; это самое распространенное узкое место, когда дело доходит
в производительности JavaScript. Это потому, что дом обычно
реализован отдельно от движка JavaScript...

Суть в том, что доступ к DOM должны быть сведены к минимуму.
Это означает:


  • Избегая доступ к DOM в петли

  • Присвоение дом ссылки на локальные переменные и работать с местными жителями

  • Используя селекторы API, для которых доступна

  • Кэширование длины при переборе коллекции в HTML


Я сделал это здесь. Я создал одну дополнительную переменную изображений и присваивается пустой массив. Затем, используя функцию подсчета, я храню ссылки на изображения в нем.

var currentImage,
images = [],

...

count = (function () {
// Figure out how many images we have on the rotation
var x = 0;
while (document.getElementById('rotateImg' + (x + 1).toString())) {
images[x] = document.getElementById('rotateImg' + x.toString());
x++;
}
return images.length;
}()),

(Если вы можете изменять HTML-код, вы можете избежать петли и собрать эти образы в одну линию. Просто добавить идентификатор элемента, который содержит их...

<p id="container">
<img src='images/rotation/dsc_0052.jpg' id='rotateImg0' alt='image rotation' />
...
</p>

...и собирать их...

var images = document.getElementById("container").getElementsByTagName("img");

Но это не поможет вам, если вы не можете изменить разметку.)

Сейчас вы можете запустить hideImage и showImages на массив вместо того, чтобы ходить в дом каждый раз.

2. Когда первый аргумент метода setInterval - это строка, браузер выполняет функцию eval() - это реализация JavaScript компилятор -- на него перед обжигом. Это тоже дорогая и ненужная здесь. Из страница 111 из Дугласа Крокфорда в JavaScript: в хорошие части:


Браузер обеспечивает функции setTimeout и метода setInterval функции, которые могут
принимающие строковые аргументы или аргументы функции. Когда данную строку
аргументы функции setTimeout и метода setInterval выступать в качестве оценки. Строку
форма аргумента также следует избегать.

Избавление от кавычек и закрывающих скобок делает его простой старый справочник по функциям, который работает нормально.

Так что я изменил это:

var interval = setInterval("rotation.advanceRotation()", 4000);

К этому:

var interval = setInterval(rotation.advanceRotation, 4000);

3. Не важно здесь. Вы можете сделать все ваши объявления переменной с одним ВАР заявление на функцию. Это снижает шансы ваши переменные могут быть затерты или недоступны из-за подъема. С помощью JavaScript Шаблоны снова:


JavaScript позволяет вам иметь несколько ВАР заявления в любом месте
функции, и все они действуют так, как если бы переменные были объявлены в
верхняя часть функция... это может привести к логическим ошибкам при использовании
переменной и затем заявить его в дальнейшем в функции.

Поэтому я достала несколько ВАР заявления и объявили их всех в верхней части внешней функции.

Окончательный код:

<html lang="en">
<head>
<title>Rice Flour Cookies' image rotation test</title>

</head>

<body>
<p>
<img src='images/rotation/dsc_0052.jpg' id='rotateImg0' alt='image rotation' />
<img src='images/rotation/bilde1.jpg' id='rotateImg1' style='display:none;' alt='image rotation' />
<img src='images/rotation/bilde2.jpg' id='rotateImg2' style='display:none;' alt='image rotation' />
<img src='images/rotation/bilde3.jpg' id='rotateImg3' style='display:none;' alt='image rotation' />
<img src='images/rotation/bilde4.jpg' id='rotateImg4' style='display:none;' alt='image rotation' />
<img src='images/rotation/dsc_0043.jpg' id='rotateImg5' style='display:none;' alt='image rotation' />
</p>
</body>
</html>

<script type='text/javascript'>
var rotation = function () {
var currentImage,
images = [],
count,
hideImages,
showImage,
fn;

count = (function () {
// Figure out how many images we have on the rotation
var x = 0;
while (document.getElementById('rotateImg' + (x + 1).toString())) {
images[x] = document.getElementById('rotateImg' + x.toString());
x++;
}
return images.length;
})();

hideImages = function () {
// Hide all the images
for (var i = 0; i < count; i++) {
images[i].style.display = 'none';
}
};

showImage = function (number) {
images[number].style.display = 'block';
};

fn = {};
fn.setupRotation = function () {
// Show the first image
currentImage = 0;
showImage(currentImage);

// Start the rotation
var interval = setInterval(rotation.advanceRotation, 4000);
};

fn.advanceRotation = function () {
if (currentImage + 1 == count)
currentImage = 0;
else
currentImage++;
hideImages();
showImage(currentImage);
};

return fn;
} ();

rotation.setupRotation();
</script>

И вы можете увидеть его в действии здесь:
http://james.da.ydrea.ms/riceflourcookies/rotate.html

2
ответ дан 6 ноября 2011 в 05:11 Источник Поделиться

Другие вопросы по теме