Форум

c124578 · #1 (**permalink**) 01.11.2011, 17:59

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

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

ksa · #2 (**permalink**) 01.11.2011, 20:00

Сообщение от c124578

Что за чудеса?

Пример будет?

c124578 · #3 (**permalink**) 01.11.2011, 20:35

Так хорошо:

<!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;
}
Мистика!

ksa · #4 (**permalink**) 01.11.2011, 20:59

c124578, т.е. на всё влияет простое подключение цсс-файла с тем небольшим содержимым? Просто пробовать буду только завтра...

c124578 · #5 (**permalink**) 01.11.2011, 21:03

именно так и есть, причем содержимое может быть абсолютно любое.

ksa · #6 (**permalink**) 01.11.2011, 21:08

Значит завтра будет что посмотреть...

antibot · #7 (**permalink**) 01.11.2011, 21:36

Ну для начала

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 свойств каждый раз. Вот откуда и лишние итерации...

dmitriymar · #8 (**permalink**) 01.11.2011, 22:00

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

trikadin · #9 (**permalink**) 01.11.2011, 22:32

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

Тут один товарищ на 15-й хром жаловался...

c124578 · #10 (**permalink**) 01.11.2011, 22:35

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

Форум

Справочник

Discord чат

Курсы javascript