загадка при анимации
если задаю стили для двигаемого объекта в прямо в HTML файле или через DOM, то двигается нормально и красиво, если для этого объекта есть непустая запись в отдельном CSS файле (пусть даже, не влияющия на позицию, например backgroud) - анимация прерывистая и некрасивая.
Использую простой JS, алгоритм любой, даже x = x+3, дает плохую картину. setTimout(function() { анимация }, 15) без CSS файла делает примерно в 6 раз больше итераций, чем с CSS файлом. Что за чудеса? |
Цитата:
|
Так хорошо:
<!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; } Мистика! |
c124578, т.е. на всё влияет простое подключение цсс-файла с тем небольшим содержимым? Просто пробовать буду только завтра...
|
именно так и есть, причем содержимое может быть абсолютно любое.
|
Значит завтра будет что посмотреть... :D
|
Ну для начала
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 свойств каждый раз. Вот откуда и лишние итерации... |
Теоретически:
стиль элемента и в таблице внешней и во внутренней -для чего? 1 по логике вещей-внутренняя переопределяет значение внешней при каждой итерации и затем меняется на динамическое-больше неоткуда браться. 2 скрипт запускается на выполнение до полной загрузки таблицы-отсюда выходит поведение в пункте 1. вариант определить-запускать код по событию onload.как вариант -а браузер сколько потоков загрузки одновременно поддерживает? а вообще при подключении внешней таблицы и запуске по onload в подобной задаче у меня было всё норм |
c124578, а браузер-то, браузер какой?
Тут один товарищ на 15-й хром жаловался... |
ставил id="image" onmouseover="анимация", уже все загрузилось, что можно, то же самое получается.
Кто делал слайдер-меню, галереи, скажите был у вас такой вопрос; если нет - надо полагать, что-то конкретно на моей ЭВМ? браузер FF 3.6 |
| Часовой пояс GMT +3, время: 01:06. |