Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2010, 10:50
Аватар для RE_
RE_ RE_ вне форума
Интересующийся
Отправить личное сообщение для RE_ Посмотреть профиль Найти все сообщения от RE_
 
Регистрация: 20.07.2010
Сообщений: 16

Бегущая строка для всех браузеров
Цель - написать бегущую строку на JvScr, но чтобы она прокручивалась плавно, а не по буквам (ну надо по работе), поэтому большинство скриптов и простых (да и сложных) решений не подходят.
Также нужно чтобы строка была зациклена.

Нашел это(этот скрипт похож, но источник был другой, сейчас не могу найти). Но прилагаемый пример работает только в Опере и IE. В ФФ и Chrome он не работает. После небольшой модификации, он стал работать, но дико тормозить.

Причем, в Опере скрипт грузит проц на 0%, после запуска Хрома, скрипт начинает грузить проц на 25%
Утечек памяти вроде нет, есть утечка процессорного времени.

Очень хотелось бы знать почему это вообще происходит?! Ну и как это устранить, конечно)

stop=false;
function anistop() {stop=true}
function anirun()  {stop=false}

function start() {
	var oContainer = document.getElementById('anic');
	var oText = document.getElementById('ani');
	var oText1 = document.getElementById('ani1');
	var nWidth = -oText.offsetWidth;
	var nPos = 0;
	
	function OnTimer() {
		oText.style.left = oText1.style.left = nPos + 'px';
		if (!stop && nPos-- < nWidth)
			nPos = 0;
	}
	window.setInterval(OnTimer, 20);
}
window.onload = start;


<div id="anic" onmouseover="anistop()" onmouseout="anirun()">
	<pre id="ani">Много текста Много текста Много текста </pre><pre id="ani1">Много текста Много текста Много текста </pre>
</div>


#anic {
	position:relative;
	padding:0px;
	width:100%; height:100%;
	overflow:hidden;
}
	#ani, #ani1 {
		display:inline;
		position:relative;
	}


Понятно что я где-то что-то не удаляю, но где не могу найти. Я недавно начал в JvScr писать, тонкостей еще не знаю.

да, если несколько раз запускать скрипт в ФФ он и в Опере начинает грузить проц на 100%, причем грузит именно часть с перемещением (nPos--) или (--nPos), при наведении (строка останавливается) загрузка те самые 25%.

Последний раз редактировалось RE_, 20.07.2010 в 11:00.
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2010, 16:44
Аватар для RE_
RE_ RE_ вне форума
Интересующийся
Отправить личное сообщение для RE_ Посмотреть профиль Найти все сообщения от RE_
 
Регистрация: 20.07.2010
Сообщений: 16

Выяснил что тормозит во время перемещения, везде. Как будто браузеры не успевают перерисовывать страницу. Если открыть панель разработчика и увеличить ее почти до бегущей строки, то тормоза сходят на нет.
В хроме они иногда даже пропадают и после закрытия панели, правда до обновления страницы.

Может есть какие-нибудь рекомендации по быстрому изменению содержания?
Ответить с цитированием
  #3 (permalink)  
Старый 20.07.2010, 17:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

setInterval останавливать надо при наведении на строку и width:100%; сделать фиксированным
что - то вроде такого :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
<style type="text/css">
#anic {
	position:relative;
	padding:0px;
	width:200px; height:100%;
	overflow:hidden;
    background-color: #FFEBCD;
}
	#ani, #ani1 {
		display:inline;
		position:relative;
	}
</style>
<script language="JavaScript" type="text/javascript">
var timer, nPos = 0,
    stop = false;

function anistop() {
    stop = true
}
function anirun() {
    start()
}
function start() {
    stop = false;
    timer && window.clearInterval(timer);
    document.getElementById("anic");
    var a = document.getElementById("ani"),
        b = document.getElementById("ani1"),
        c = a.offsetWidth;
    timer = setTimeout(function () {
        a.style.left = b.style.left = nPos + "px";
        nPos -= 2;
        if (nPos < -c) nPos = 0;
        stop || setTimeout(arguments.callee, 25)
    }, 10)
}
window.onload = start;
</script>
</head>
<body>
<div id="anic" onmouseover="anistop()" onmouseout="anirun()">
<pre id="ani">Много текста Много текста Много текста </pre><pre id="ani1">Много текста Много текста Много текста </pre>
</div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 21.07.2010, 09:38
Аватар для RE_
RE_ RE_ вне форума
Интересующийся
Отправить личное сообщение для RE_ Посмотреть профиль Найти все сообщения от RE_
 
Регистрация: 20.07.2010
Сообщений: 16

рони, спасибо! Даже жесткое задание высоты для контейнера #anic позволило Хрому заработать нормально (25% загрузки)!
Теперь остался ФФ, сейчас попробую пример.
Ответить с цитированием
  #5 (permalink)  
Старый 21.07.2010, 11:23
Аватар для RE_
RE_ RE_ вне форума
Интересующийся
Отправить личное сообщение для RE_ Посмотреть профиль Найти все сообщения от RE_
 
Регистрация: 20.07.2010
Сообщений: 16

запустил в чистом документе - работают оба кода, с примерно одинаковой производительностью. Добавление стилей и тегов увеличивает потребление ресурсов ~вдвое, но на приемлемом уровне.

В проекте в ФФ тормозит, черт
upd: видимо просто большую страницу перерисовывает намного дольше тестовой

Последний раз редактировалось RE_, 21.07.2010 в 13:01.
Ответить с цитированием
  #6 (permalink)  
Старый 21.07.2010, 12:54
Аватар для RE_
RE_ RE_ вне форума
Интересующийся
Отправить личное сообщение для RE_ Посмотреть профиль Найти все сообщения от RE_
 
Регистрация: 20.07.2010
Сообщений: 16

Странно, но ширина почти не влияет на производительность. ФФ перестает тормозить при интервале 300мс (

Вопрос по коду: зачем нужен timer && window.clearInterval(timer); и timer = setTimeout( ?

переписал так:
var timer, nPos = 0;

function anistop() {stop = true}
function anirun() {start()}

function start() {
    stop = false;
    var a = document.getElementById('ani'),
        w = -a.offsetWidth/2;
   (function () {
        a.style.left=nPos+'px';
		nPos -= 3;
        if (nPos < w) nPos = 0;
        stop || setTimeout(arguments.callee, 300)
    })()
}
window.onload = start;


производительность вроде такая же или чуть-чуть больше, но все равно в ФФ она нулевая
Ответить с цитированием
  #7 (permalink)  
Старый 21.07.2010, 15:04
Новичок на форуме
Отправить личное сообщение для NixCore Посмотреть профиль Найти все сообщения от NixCore
 
Регистрация: 07.06.2009
Сообщений: 8

Я бы ещё на твоём месте объявил переменную a глобально.
А то она у тебя при каждом изменении таймера объявляется.
Для этого вынеси её за пределы function в начало скрипта
Ответить с цитированием
  #8 (permalink)  
Старый 21.07.2010, 16:51
Аватар для RE_
RE_ RE_ вне форума
Интересующийся
Отправить личное сообщение для RE_ Посмотреть профиль Найти все сообщения от RE_
 
Регистрация: 20.07.2010
Сообщений: 16

NixCore, переменная а (которая "содержит" перемещаемый элемент) объявлена в функции start(), а вызывается по таймеру функция function () (без названия).

А объявить а глобально вроде нельзя (или там надо переменную передавать) короче много труда, а в производительности выигрыша не будет - функция start() отрабатывает только один раз
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие change для всех элементов exvion jQuery 2 25.01.2010 18:18
Бегущая строка kali4st Ваши сайты и скрипты 10 18.12.2009 15:39
Необходима бегущая строка: непрерывная, снизу вверх Garaeva_Gulnara Элементы интерфейса 3 30.10.2009 18:25
Пошаговый вывод скрипта для IE всех версий. Zidky Элементы интерфейса 10 17.06.2009 18:27
Как присвоить текст строке состояния для всех браузеров? Tend Общие вопросы Javascript 4 14.05.2009 16:38