VPF::Плавное перетекание изображения.

Ghirik

Дата 25.9.2007, 19:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Собственно, заклинило меня. smile

Скрипт почти закончил, а с последовательностью событий, что то приклинило.
Вот сам html:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>slideShow</title>
<script type="text/javascript">

// глобальные объявления
  var displayedImage = 1;             // объявляем переменную, в которой будем хранить значение индекса текущего изображения
  var newImage = 2;                   // объявляем переменную, в которой будем хранить значение индекса нового изображения
  var oldImage = 0;                   // объявляем переменную, в которой будем хранить значение индекса заменяемого изображения
  var changeTime = 10;                // время плавного появления/исчезновения
  var parentPicNumber = 10;           // индекс старшей картинки, нумерация начинается с 0.jpg, по умолчанию папка с картинками - img
  var imagesArray = [];               // объявляем массив изображений

// функция для взятия элементов по их id, принимает строковое значение id, возвращает объект
  $ = function (id) {
    return document.getElementById(id);
  }

  function preload_img() {                             // предварительная загрузка первых трёх изображений
    $('B1').disabled = true;                           // выключаем кнопки
    $('B2').disabled = true;
    creation_img(displayedImage);                      // создаем первый объект img
    imagesArray[displayedImage].onload = processing;   // переназначаем обработчик события onload, сработает только один раз
    creation_img(oldImage);
    creation_img(newImage);
  }

  function onload_img(){                               // если все изображения загружены, включаем кнопки
    //if ((imagesArray[oldImage].complete == true) &&  (imagesArray[newImage].complete ==true) && (imagesArray[displayedImage].complete == true)){
      alert(imagesArray[oldImage].complete+'\n'+imagesArray[displayedImage].complete+'\n'+imagesArray[newImage].complete)
      $('B1').disabled = false;
      $('B2').disabled = false;
   // }
  }

  function creation_img(i){                               // функция создания элемента img
    if (imagesArray[i]) {                                 // если такой элемент уже был создан
      return;                                             // выходим из функции
    }
    imagesArray[i] = document.createElement('img');       // создаем элемент img
    imagesArray[i].src = 'img/' + i + '.jpg';             // присваиваем значение аттрибуту src
    imagesArray[i].align = 'left';                        // задаем обтекание текстом слева
    imagesArray[i].style.display = 'none';                // запрещаем отображение созданного элемента img
    imagesArray[i].style.position = 'absolute';           // задаем абсолютное позиционирование
    imagesArray[i].style.zIndex = i;                      // присваиваем индекс слоя
    $('div').appendChild(imagesArray[i]);                 // помещаем созданный элемент img в контейнер с индексом div
    imagesArray[i].onload = onload_img;                   // назначаем обработчик события onload
    if (imagesArray[i].filters) {                         // устанавливаем начальную прозрачность
        imagesArray[i].style.filter = 'alpha(opacity=0)'  // для IE
    } else {
        imagesArray[i].style.opacity = 0;                 // для FF
    }
  }

  function processing() {
    for (var c = 1; c <= 100; c++) {                   // запускаем сотню таймаутов для смены изображений
      window.setTimeout(function (c) {
        return function() {
          sets_opacity(c);                             // вызываемая методом setTimeout() функция
        }
      }(c), changeTime * c);
    }
    //document.body.style.display = '';                  // не правильно так делать, но другого не придумал :-))
  }

  function sets_opacity(c) {
    if (c == 1) {
      imagesArray[displayedImage].style.display = '';
    }
    if (imagesArray[displayedImage].filters) {
      imagesArray[displayedImage].style.filter = 'alpha(opacity=' + c + ')'       // для IE
      imagesArray[oldImage].style.filter = 'alpha(opacity=' + (100-c) + ')'
    } else {
      imagesArray[displayedImage].style.opacity = c / 100;                        // для FF
      imagesArray[oldImage].style.opacity = (100-c) / 100;
    }
    if (c==100){
    imagesArray[oldImage].style.display = 'none';
    }
  }

  function click_button(i) {
      $('B1').disabled = true;                   // выключаем кнопки
      $('B2').disabled = true;
      oldImage += i;
      displayedImage += i;
      newImage += i;
    if (oldImage == -1) {
      oldImage = parentPicNumber;
    }
    if (displayedImage == -1) {
      displayedImage = parentPicNumber;
    }
    if (newImage == -1) {
      newImage = parentPicNumber;
    }
    if (oldImage == parentPicNumber+1) {
      oldImage = 0;
    }
    if (displayedImage == parentPicNumber+1) {
      displayedImage = 0;
    }
    if (newImage == parentPicNumber+1) {
      newImage = 0;
    }
      creation_img(newImage);                    // создаем новый элемент (imagesArray[newImage]), если не был создан
      processing();                              // переходим к эффектам
  }
//-->
</script>
</head>
<body onload="preload_img()">
<br>
<div id=div style="position: relative; width: 190px; height: 100px; z-index: 0; float: left">
</div>
<input id="B1" type="button" value="Назад" onmouseup="click_button(-1)">
<input id="B2" type="button" value="Вперед" onmouseup="click_button(1)">

</body>
</html>

Почему то в IE вылетае complete = false у предзагруженных изображений.

Вот ссылка на страницу

Добавлено @ 19:50
Скрипт ещё не доделаный, но, надеюсь, это не на долго.

Я старался коментировать, чтобы было всем, даже самым-самым начинающим понятно, но ... Из меня коментатор... smile

Это сообщение отредактировал(а) Ghirik - 25.9.2007, 20:48

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Ghirik

Дата 25.9.2007, 19:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

dsCode, Вы меня научили делать названия переменных информативными, и я теперь смотрю на oldImage, displayedImage, newImage...
И ни как не могу представить что это такое smile

То ли дело a=1, b=2, c=3 i=b+c - всё понятно!

Вообще, сердце кровью обливается, когда переменная имеет всего два значения - "0" или "1" и занимает один бит, а именуется целым предложением..... smile

Это сообщение отредактировал(а) Ghirik - 25.9.2007, 20:17

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Ghirik

Дата 25.9.2007, 20:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Много косяков, рано выложил.... счас подправлю...

--------------------

Отдадим всё клиенту, пускай его машина мучается...

AKS

Дата 25.9.2007, 20:41 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

Цитата(Ghirik @ 25.9.2007, 19:40

)

Почему то в IE вылетае complete = false у предзагруженных изображений.

Может быть потому, что IE самый честный:

Код


(function () {
    alert(document.createElement('img').complete); // IE -> false, FF -> true, Opera -> true
})();

Вот чего там в FF/Opera complete? smile

Ghirik

Дата 25.9.2007, 21:06 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Цитата

Вот чего там в FF/Opera complete?

Нет, но изображения должны загрузиться. Элементы созданы, src указан....
И даже если убираю дисплей нон, все равно в IE false.

Самое непонятное то, что в это место скрипта указатель попадает в результате события onload. Т.е., изображение загружено, событие произошло, а complete = false.

Это сообщение отредактировал(а) Ghirik - 25.9.2007, 21:13

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Ghirik

Дата 25.9.2007, 21:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Блин! Здесь то же самое, но везде true...

Добавлено @ 21:33
Ого! Промашка вышла... Когда в IE возникает событие onload, свойство complete ещё не готово.
Вот.

И как с этим бороться?

Это сообщение отредактировал(а) Ghirik - 25.9.2007, 21:34

--------------------

Отдадим всё клиенту, пускай его машина мучается...

AKS

Дата 25.9.2007, 21:51 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

Ghirik, Вы меня не поняли. Я привел пример того, что в FF/Opera у элемента img св-во complete предоставляет некорректную информацию. Из примера видно - несмотря на то, что вновь созданному элементу не указан даже адрес файла изображения, св-во complete возвращает true.
В IE св-во complete меняет значение с false на true после того, как изображение было загружено (или после прорисовки на странице - короче говоря меняется в любом случае). В обработчике события вызовите метод window.setTimeout с нулевой задержкой и передайте ему функцию, которая проверит св-во complete (через 0 mc оно будет true).

Ghirik

Дата 25.9.2007, 21:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Вообще, не понимаю. smile

Вот код последней ссылки:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Title block</title>
<script type="text/javascript">
<!--
  var imagesArray = [];
  var i=1;  

  $ = function (id) {
    return document.getElementById(id);
  }

function on_load() {
    imagesArray[i] = document.createElement('img');       // создаем элемент img
    imagesArray[i].src = 'img/' + i + '.jpg';             // присваиваем значение аттрибуту src
    imagesArray[i].align = 'left';                        // задаем обтекание текстом слева
    //imagesArray[i].style.display = 'none';                // запрещаем отображение созданного элемента img
    imagesArray[i].style.position = 'absolute';           // задаем абсолютное позиционирование
    imagesArray[i].style.zIndex = i;                      // присваиваем индекс слоя
    $('div').appendChild(imagesArray[i]);                 // помещаем созданный элемент img в контейнер с индексом div
    imagesArray[i].onload = click_button;                   // назначаем обработчик события onload
    i=2
    imagesArray[i] = document.createElement('img');       // создаем элемент img
    imagesArray[i].src = 'img/' + i + '.jpg';             // присваиваем значение аттрибуту src
    imagesArray[i].align = 'left';                        // задаем обтекание текстом слева
    imagesArray[i].style.display = 'none';                // запрещаем отображение созданного элемента img
    imagesArray[i].style.position = 'absolute';           // задаем абсолютное позиционирование
    imagesArray[i].style.zIndex = i;                      // присваиваем индекс слоя
    $('div').appendChild(imagesArray[i]);                 // помещаем созданный элемент img в контейнер с индексом div
    imagesArray[i].onload = click_button;                   // назначаем обработчик события onload
    i=3
    imagesArray[i] = document.createElement('img');       // создаем элемент img
    imagesArray[i].src = 'img/' + i + '.jpg';             // присваиваем значение аттрибуту src
    imagesArray[i].align = 'left';                        // задаем обтекание текстом слева
    imagesArray[i].style.display = 'none';                // запрещаем отображение созданного элемента img
    imagesArray[i].style.position = 'absolute';           // задаем абсолютное позиционирование
    imagesArray[i].style.zIndex = i;                      // присваиваем индекс слоя
    $('div').appendChild(imagesArray[i]);                 // помещаем созданный элемент img в контейнер с индексом div
    imagesArray[i].onload = click_button;                   // назначаем обработчик события onload
}
function click_button() {
alert(imagesArray[1].complete+'\n'+imagesArray[2].complete+'\n'+imagesArray[3].complete);
}
//-->
</script>
</head>
<body onload="on_load()">
<div id=div style="position: relative; width: 190px; height: 100px; z-index: 0; float: left">
</div>
<br>
<input id="B1" type="button" value="complete" onmouseup="click_button()">
</body>
</html>

Вызывается одна и та же функция, по событию onload и по нажатию кнопки. Ну ладно, первое событие onload происходит с результатом false. Но второе то и третье!!!
А от кнопки, всегда - true.

Добавлено @ 22:01

Цитата

В IE св-во complete меняет значение с false на true после того, как изображение было загружено (или после прорисовки на странице - короче говоря меняется в любом случае). В обработчике события вызовите метод window.setTimeout с нулевой задержкой и передайте ему функцию, которая проверит св-во complete (через 0 mc оно будет true).

Да, действительно так работает.

И как это дело объяснить? Это же, однако, не правильно.

Это сообщение отредактировал(а) Ghirik - 25.9.2007, 22:04

--------------------

Отдадим всё клиенту, пускай его машина мучается...

AKS

Дата 26.9.2007, 06:16 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

Цитата(Ghirik @ 25.9.2007, 21:54

)

И как это дело объяснить? Это же, однако, не правильно.

А как правильно? Свойство-то нестандартное. Даже документированные "дела", как мы уже могли не раз убедиться, не всегда работают так, как ожидается...

Ghirik

Дата 26.9.2007, 11:00 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Пока просто добиваюсь нормальной работы скрипта(не до "причесывания функций"), вот стало получаться.
Но что то назад не крутятся каринки.

--------------------

Отдадим всё клиенту, пускай его машина мучается...

ksnk

Дата 26.9.2007, 17:09 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Меня пока смущает обычай называть свои картинки 1.jpg, 2 .jpg и т.д., и показывать их обязательно в таком порядке. Несложно представить себе картинку, когда прибегает редактор и кричит - "а вот эту и эту порнуху срочно выкинуть, а вот сюда вставить вот эту..." smile

Предстоит не всегда тривиальный процесс переименования картинок... Более технологично, imho, было бы срузу размещать картинки в тегах IMG, а при загрузке странички перебирать их и навешивать необходимые обработчики. Такой подход позволит. к примеру хранить список картинок в базе или просто в каталоге и упростит генерацию списка, а также исключит необходимость правки скрипта при смене содержимого.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »