hohe CPU-Auslastung beim Bewegen eines Elements

[obaran]

Hallo,

ich habe ein kleines "Scroll"-Script geschrieben.
Dabei habe ich das Problem das ich eine sehr hohe CPU Auslastung erhalte.
Kann mir da bitte einer weiterhelfen.

Hier mein Script:

function scroller_init(){
	steps = 1;
	slideSpeed = 45;
	waitTime = 0;
	
	margin = 5;
	
	slide = true;
	
	var scroller = document.getElementById("scroller_content");
	
	//Daten werden nun per CSS gesetzt, damit der Ticker nicht springt
	//scroller.style.height = box_height + "px";
	//scroller.style.overflow = "hidden";
	//scroller.style.position = "relative";
	//scroller.style.borderBottom = "1px solid #FFF";
	
	divs = scroller.getElementsByTagName("DIV");
	
	for(var i = 0; i < divs.length; i++){
		divs[i].style.position = "absolute";
		divs[i].style.top = box_height + "px";
	}
	
	current_element = 0;
	
	/*scroller.onmouseover = function (evt) {
		slide = false;
		
	}
	scroller.onmouseout = function (evt) {
		slide = true;
		scroller_slide();
	}*/
	//setInterval("scroller_slide()",slideSpeed);
	scroller_slide();
}

function scroller_slide(){
	if(slide){
		if(current_element < (divs.length-1)){
			next_element = current_element + 1;
		}else{
			next_element = 0;
		}
		
		divs[current_element].style.top = parseInt(divs[current_element].style.top) - steps + "px";
		
		if(parseInt(divs[current_element].style.top) == 0 && waitTime > 0){
			slide = false;
			setTimeout("slide = true; scroller_slide()", waitTime);
			return true;
		}
		
		if(parseInt(divs[current_element].style.top + divs[current_element].offsetHeight) < box_height){
			divs[next_element].style.top = parseInt(divs[current_element].style.top) + margin + divs[current_element].offsetHeight + "px";
		}
		
		if(parseInt(divs[current_element].style.top) < (divs[current_element].offsetHeight * -1)){
			divs[current_element].style.top = box_height + "px";
			current_element = next_element;
		}
		setTimeout("scroller_slide()",slideSpeed)
	}
}

window.onload = scroller_init;

Und hier der HTML Code:

<div id="scroller_content">
	<div>
		<h3>Ueberschrift1</h3>
		<p>Text Text Text Text</p>
	</div>
	<div>
		<h3>Ueberschrift2</h3>
		<p>Text Text Text Text</p>
	</div>
	<div>
		<h3>Ueberschrift3</h3>
		<p>Text Text Text Text</p>
	</div>
</div>

Danke schonmal für die Hilfe.

Gruß
Oliver

 

[Sven Mintel]

Da gibts nicht viel zu helfen, setze steps und/oder slideSpeed herauf, dann gibt es weniger zu tun für die CPU .

 

[obaran]

Hallo danke für die Antwort.
Wieso bekommen andere Scripts das "besser" hin als ich?
Ich hab mal versucht die Scripts mit einander zu vergleichen aber keinen wirklichen Unterschied zu mir feststellen können, außer das die die Elemente etwas anders ansprechen als ich.
Wenn ich mir andere Scripte mit meinem Browser ansehe habe ich nicht eine so hohe CPU Auslastung...

Gruß
Oli

 

[Sven Mintel]

Naja.... wenn du die ganzen Rechenschritte für jedes Div machst, verfielfacht sich halt der Aufwand auch um die Anzahl der Divs.

Packe in scroller_content ein weiteres Div, welches den zu scrollenden Inhalt beherbergt, und scrolle nur dieses DIV, dann hast du das Problem nicht.