PDA

Просмотр полной версии : бешеная картинка

navidim
24.11.2006, 16:15
ниже приведен скрипт, а проблема в нем вот какая:
рисунок сначала движется нормально, а потом начинает летать как бешеный (очень быстро) :eek:
почему это может происходить??? ведь я прибавляю все время по одному пикселю! Подскажите пожалуйста... :D

<script language="JavaScript">
function dem() {
document.all.risunok.style.posLeft+=1
setTimeout ('dem()', 100)
}
</script>
<body>
<img id="risunok" src="nevajno" style="position: absolute; z-index:0; left: -50px; top: 100px" onLoad="dem()">
</body>
KidsKilla
24.11.2006, 16:32
ниже приведен скрипт, а проблема в нем вот какая:
рисунок сначала движется нормально, а потом начинает летать как бешеный (очень быстро) :eek:
почему это может происходить??? ведь я прибавляю все время по одному пикселю! Подскажите пожалуйста... :D

<script language="JavaScript">
function dem() {
document.all.risunok.style.posLeft+=1
setTimeout ('dem()', 100)
}
</script>
<body>
<img id="risunok" src="nevajno" style="position: absolute; z-index:0; left: -50px; top: 100px" onLoad="dem()">
</body>
1) забудь про document.all. он работает только в ие. есть правильный аналог: document.getElementById()

2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
</head><body><script type="text/javascript">
function dem(t) {
// alert(t)
t.style.left = (t.offsetLeft+1)+'px';
}
function startFunc(f,el,tmr){
// alert([f,el.style,tmr]);
f(el);
return setInterval(function(){f(el)}, tmr)
}
</script>
<body>
<img id="risunok" src="http://194.67.27.119/images/default/default/ico_leader.gif" style="position:absolute;z-index:1;left:50px;top:100px;" onload="startFunc(dem,this,10);">
</body>
</html>
navidim
24.11.2006, 17:06
KidsKilla к сожалению, эффект тот же, рисунок приобретает ускорение, сначала двигаясь медленно, а потом - очень быстро...
KidsKilla
24.11.2006, 18:12
KidsKilla к сожалению, эффект тот же, рисунок приобретает ускорение, сначала двигаясь медленно, а потом - очень быстро...
????????
=)))))))

можт у тя комп дерертирует? =)))

работает всё. проверял и в ослике и в фф и в опере
navidim
24.11.2006, 18:25
не подскажешь: что можно сделать в данной ситуации???
просто такой эффект на нескольких компах.....
картинка ускоряется !!!

ПОМОГИТЕ КТО-НИБУДЬ!!! :wacko:
KidsKilla
24.11.2006, 19:09
не подскажешь: что можно сделать в данной ситуации???
просто такой эффект на нескольких компах.....
картинка ускоряется !!!

ПОМОГИТЕ КТО-НИБУДЬ!!! :wacko:
ор тут не поможет. можно только плюсов нахватать.

если ты имеешь в виду тот факт что она "дёргается" то тут не сделаешь ничего. вообще. setInterval (setTimeout) работают не совсем равномерно. + всё зависит от загруженности компа.
navidim
24.11.2006, 19:55
KidsKilla... если бы она дергалась, то я бы не кричал! она сначала двигается плавно (со скоростью + 1 px) а потом начинает двигаться быстрее (со скоростью 2 px 3 px 4 px и т.д.)
просто изучая оба скрипта я в упор не вижу почему это может происходить!
меня это очень мучает!
navidim
24.11.2006, 20:11
KidsKilla
вот исходники, можете проверить, как у вас работает?
если подождать пока бабочка пролетит пару раз - её скорость значительно возрастает! :(
с вашим скриптом - то же самое ...
KidsKilla
24.11.2006, 20:40
KidsKilla
вот исходники, можете проверить, как у вас работает?
если подождать пока бабочка пролетит пару раз - её скорость значительно возрастает! :(
с вашим скриптом - то же самое ...
1) ты упорно пытаешься заточить жс код только под ие. за это руки отрывать.

2) никаких изменений в скорости не заметил.

3) вот правильный код, работающий во всех браузерах (с учетом цикличности движения):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
</head><body><script type="text/javascript">
function dem(t) {
// alert(t)
var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
t.style.left = (t.offsetLeft>w-t.offsetWidth) ? '0' : (t.offsetLeft+1)+'px';
}
function startFunc(f,el,tmr){
// alert([f,el.style,tmr]);
f(el);
return setInterval(function(){f(el)}, tmr)
}
</script>
<body>
<img id="risunok" src="http://194.67.27.119/images/default/default/ico_leader.gif" style="position:absolute;z-index:1;left:50px;top:100px;" onload="startFunc(dem,this,10);">
</body>
</html>
navidim
24.11.2006, 21:02
ладно, спасибо большое за помощь, но бабочка по-прежнему улетает весьма быстро...
ещё один вопрос и все: "пытаешься заточить жс код только под ие. за это руки отрывать"
в чем именно, и как этого избежать?
KidsKilla
24.11.2006, 21:07
ладно, спасибо большое за помощь, но бабочка по-прежнему улетает весьма быстро...
ещё один вопрос и все: "пытаешься заточить жс код только под ие. за это руки отрывать"
в чем именно, и как этого избежать?
1) проверять как это работает в других браузерах
2) не использовать специфические для ие штуки типа posLeft и document.all
3) делать в соответствии со стандартами (доки по стандартам можно найти в этой же ветке в прикреплённой теме)
KidsKilla
24.11.2006, 21:22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
</head><body><script type="text/javascript">
function dem(t) {
// alert(t)
var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
t.style.left = (t.offsetLeft>w-t.offsetWidth) ? '0' : (t.offsetLeft+1)+'px';
if(!t.offsetLeft) test.innerHTML += 'new line at: '+getT();
}
function startFunc(f,el,tmr){
// alert([f,el.style,tmr]);
f(el);
var test = document.getElementById('test');
test.innerHTML += 'start at: '+getT();
return setInterval(function(){f(el)}, tmr);
}

function getT(){
var d = new Date();
return d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()+'<br>';
}
</script>
<body>
<div id="test"></div>
<img id="risunok" src="http://194.67.27.119/images/default/default/ico_leader.gif" style="position:absolute;z-index:1;left:50px;top:100px;" onload="startFunc(dem,this,10);">
</body>
</html>

тест:

start at: 20:21:23
new line at: 20:21:29
new line at: 20:21:35
new line at: 20:21:42
new line at: 20:21:48
new line at: 20:21:55
new line at: 20:22:1
new line at: 20:22:8

как видишь разница стабильна (6-7 секунд)
navidim
25.11.2006, 13:30
как видишь разница стабильна (6-7 секунд)

я просто в шоке! запускаю твой скрипт - работает, запускаю свой старый скрипт с другой картинкой работает,
запуская твой скрипт с БАБОЧКОЙ - не работает, мой с БАБОЧКОЙ тоже не работает!!!!!!!!!
как это может зависеть от GIF файла???????
бред, просто бред :(

спасибо тебе за уроки KidsKilla
navidim
25.11.2006, 15:14
Я понял! картинка ускоряется если в ней есть анимация! статические изображения ведут себя нормально!
почему так происходит?? печально...
navidim
25.11.2006, 15:33
ПРОБЛЕМА РЕШЕНА!!!!!!!!!!!! надо было просто вызывать функцию с setInterval из <body onLoad=""> а не из <img onLoad="">

спасибо огромное KidsKilla, за то, что помогал мне!
тема закрыта!