Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.11.2011, 17:59
Интересующийся
Отправить личное сообщение для c124578 Посмотреть профиль Найти все сообщения от c124578
 
Регистрация: 09.07.2011
Сообщений: 21

загадка при анимации
если задаю стили для двигаемого объекта в прямо в HTML файле или через DOM, то двигается нормально и красиво, если для этого объекта есть непустая запись в отдельном CSS файле (пусть даже, не влияющия на позицию, например backgroud) - анимация прерывистая и некрасивая.

Использую простой JS, алгоритм любой, даже x = x+3, дает плохую картину.
setTimout(function() { анимация }, 15) без CSS файла делает примерно в 6 раз больше итераций, чем с CSS файлом.
Что за чудеса?

Последний раз редактировалось c124578, 01.11.2011 в 18:06.
Ответить с цитированием
  #2 (permalink)  
Старый 01.11.2011, 20:00
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от c124578
Что за чудеса?
Пример будет?
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2011, 20:35
Интересующийся
Отправить личное сообщение для c124578 Посмотреть профиль Найти все сообщения от c124578
 
Регистрация: 09.07.2011
Сообщений: 21

Так хорошо:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="st\\\\yle.css" type="text/css">
</head>

<style>
#image {
position:absolute;
background:url("images/1/1.jpg");
width:500px;
height:300px;
}
</style>

<body>

<div id="image"></div>

<script type="text/javascript">

var result = 0;

setTimeout(function() {

    result++;
    document.getElementById("image").style.left = result + "px";

    if (result < 101) 
        setTimeout(arguments.callee, 20);
}, 0);

</script>

</body>
</html>

а так плохо:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<style>
#image {
position:absolute;
background:url("images/1/1.jpg");
width:500px;
height:300px;
}
</style>

<body>

<div id="image"></div>

<script type="text/javascript">

var result = 0;

setTimeout(function() {

    result++;
    document.getElementById("image").style.left = result + "px";

    if (result < 101) 
        setTimeout(arguments.callee, 20);
}, 0);

</script>

</body>
</html>


style.css :
#image{
display:block;
}
Мистика!
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2011, 20:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

c124578, т.е. на всё влияет простое подключение цсс-файла с тем небольшим содержимым? Просто пробовать буду только завтра...
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2011, 21:03
Интересующийся
Отправить личное сообщение для c124578 Посмотреть профиль Найти все сообщения от c124578
 
Регистрация: 09.07.2011
Сообщений: 21

именно так и есть, причем содержимое может быть абсолютно любое.
Ответить с цитированием
  #6 (permalink)  
Старый 01.11.2011, 21:08
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Значит завтра будет что посмотреть...
Ответить с цитированием
  #7 (permalink)  
Старый 01.11.2011, 21:36
Интересующийся
Отправить личное сообщение для antibot Посмотреть профиль Найти все сообщения от antibot
 
Регистрация: 11.08.2011
Сообщений: 10

Ну для начала

document.getElementById("image").style.left = result + "px";

Вынеси из цикла...

var image=document.getElementById("image");

////

image.style.left = result;

А во вторых в обоих случает разница - 1-2 млс при 100 повторах...
В общем нет разницы...

Зато document.getElementById("image").style.left = result + "px";
замедляет очень сильно из за вызова 1 функции и 2 свойств каждый раз. Вот откуда и лишние итерации...
Ответить с цитированием
  #8 (permalink)  
Старый 01.11.2011, 22:00
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Теоретически:
стиль элемента и в таблице внешней и во внутренней -для чего?
1 по логике вещей-внутренняя переопределяет значение внешней при каждой итерации и затем меняется на динамическое-больше неоткуда браться.
2 скрипт запускается на выполнение до полной загрузки таблицы-отсюда выходит поведение в пункте 1.
вариант определить-запускать код по событию onload.как вариант -а браузер сколько потоков загрузки одновременно поддерживает?
а вообще при подключении внешней таблицы и запуске по onload в подобной задаче у меня было всё норм

Последний раз редактировалось dmitriymar, 01.11.2011 в 22:02.
Ответить с цитированием
  #9 (permalink)  
Старый 01.11.2011, 22:32
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

c124578, а браузер-то, браузер какой?

Тут один товарищ на 15-й хром жаловался...
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #10 (permalink)  
Старый 01.11.2011, 22:35
Интересующийся
Отправить личное сообщение для c124578 Посмотреть профиль Найти все сообщения от c124578
 
Регистрация: 09.07.2011
Сообщений: 21

ставил id="image" onmouseover="анимация", уже все загрузилось, что можно, то же самое получается.
Кто делал слайдер-меню, галереи, скажите был у вас такой вопрос; если нет - надо полагать, что-то конкретно на моей ЭВМ?
браузер FF 3.6
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработка клика мыши при анимации stalker77 jQuery 5 30.10.2011 22:15
jQuery Использование textIndent при анимации slim-v Opera, Safari и др. 26 19.12.2010 18:16
clearInterval при окончании анимации UnderShot Общие вопросы Javascript 2 19.11.2010 20:30
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
Сглаживание при анимации everm1nd Общие вопросы Javascript 4 24.08.2009 19:01