nicht angemeldet
Hallo zusammen,
ich habe kürzlich das von http://www.webreference.com/js/column13/ her bekannte Newsticker-Skript für Mozilla angepasst. Das Skript läuft, aber: auf meiner Testumgebung (alte Möhre mit NT 4 und Mozilla 1.0) erzeugt jeder Scroll-Vorgang 100% CPU-Last, was ich nicht wirklich schön finde (selbe alte Möhre und Original-Skript mit IE bzw. NS4: keine spürbare CPU-Last). Meine Frage ist: ist das halt einfach so dass bei solchen DHTML-Spielchen Mozilla _sehr_ verschwenderisch mit den Ressourcen umgeht? Oder hab ich in meinem Skript irgendwo einen Ressourcen-Fresser, den ich eliminieren könnte?
Hier eine kompl. Testseite inkl. as-is lauffähigem Skript (- ist nur für Mozilla gedacht, k.A. was das Teil mit IE anstellen würde -):
===================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mozi-DHTML-Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var bannerWidth;
var bannerHeight;
var bannerLeft;
var bannerTop;
// Steuerdaten für Newsticker
var interval = 20;
var increment = 1;
var pause = 5000;
var bannerColor = "#ffffff";
var leftPadding = 0;
var topPadding = 0;
// Nachrichtentexte - auch HTML-Code möglich
var ar = new Array(
'Nachricht 1',
'Nachricht 2',
'Nachricht 3'
);
checkBanner = true;
// Abstand von links holen - aus der alten Forumsauslese (Gott hab sie selig :-)
function getLeft(l)
{
if (l.offsetParent) return (l.offsetLeft + getLeft(l.offsetParent));
else return (l.offsetLeft);
}
// Abstand von oben holen - aus der alten Forumsauslese (Gott hab sie selig :-)
function getTop(l)
{
if (l.offsetParent) return (l.offsetTop + getTop(l.offsetParent));
else return (l.offsetTop);
}
// Hole die Maße des Platzhalter-Bildes und Abstände von links und oben
function getHoldspace() {
bannerWidth = document.getElementById("holdspace").width;
bannerHeight = document.getElementById("holdspace").height;
bannerLeft = getLeft(document.getElementById("holdspace"));
bannerTop = getTop(document.getElementById("holdspace"));
}
// Visibility setzen
function showMessage(n, show) {
msgId = "message" + n;
whichMsg = document.getElementById(msgId);
whichEl = whichMsg.style;
whichEl.visibility = (show) ? "visible" : "hidden";
}
// Von Welcher Message zu welcher soll gescrollt werden?
function nextMessage() {
checkBanner = false;
var fromInd = current;
current = (fromInd == ar.length - 1) ? 0 : fromInd + 1;
scrollBanner(fromInd, current);
}
// Bewege die Divs nach oben - bei Erreichen des Zielpunktes wird die Bewegung
// abgebrochen (clearInterval())
function moveUp() {
fromEl.top = (parseInt(fromEl.top) - increment);
if (parseInt(toEl.top) - increment <= toElTarget) {
toEl.top = toElTarget;
clearInterval(intervalID);
fromEl.visibility = "hidden";
checkBanner = true;
timeoutID = setTimeout("nextMessage()", pause);
} else {
toEl.top = (parseInt(toEl.top) - increment);
}
}
// Definiere Ausgangs- und Zielpunkte, rufe mit setInterval() moveUp() auf -
// moveUp() enthält die Überprüfung für clearInterval()
function scrollBanner(from, to) {
fromElId = "message" + from;
fromEl = document.getElementById(fromElId).style;
toElId = "message" + to;
toEl = document.getElementById(toElId).style;
toEl.top = parseInt(fromEl.top) + bannerHeight;
toElTarget = parseInt(fromEl.top);
showMessage(to, true); // show the upcoming message
intervalID = setInterval("moveUp()", interval);
}
// Das Div mit den Nachrichten wird erzeugt und eingehängt -
// Ein Elterndiv ("banner") enthält Kind-Divs ("message" + i),
// die die eigentlichen Nachrichten enthalten
function makeLayer() {
var myDiv = document.createElement("div");
myDiv.setAttribute("id", "banner");
myDiv.setAttribute("style", "position:absolute;");
for (var i = ar.length - 1; i >= 0; i--) {
var myMsgId = "message" + i;
var myMsg = document.createElement("div");
myMsg.setAttribute("id", myMsgId);
myMsg.setAttribute("style", "position:absolute;");
myDiv.appendChild(myMsg);
}
document.getElementsByTagName("body")[0].appendChild(myDiv);
with (myDiv.style) {
width = bannerWidth;
height = bannerHeight;
left = bannerLeft;
top = bannerTop;
clip = "rect(0 " + bannerWidth + " " + bannerHeight + " 0)";
backgroundColor = bannerColor;
}
for (i = 0; i < ar.length; i++) {
theChildId = "message" + i;
theChild = document.getElementById(theChildId);
with (theChild.style) {
visibility = "hidden";
left = leftPadding;
top = topPadding;
width = bannerWidth - leftPadding;
backgroundColor = bannerColor;
}
}
}
// Fülle die Kind-Divs mit Nachrichtentexten
function fillBanner() {
var whichEl;
for (var i = 0; i < ar.length; i++) {
MsgId = "message" + i;
whichEl = document.getElementById(MsgId);
whichEl.innerHTML = ar[i];
}
}
// Starte den ganzen Krempel
function startBanner() {
getHoldspace();
makeLayer();
fillBanner();
showMessage(0, true);
current = 0;
timeoutID = setTimeout("nextMessage()", pause);
}
</script>
</head>
<body>
<p>....ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...</p>
<div align="center"><img src="image.jpg" width="310" height="129" border="0" name="holdspace" id="holdspace" alt=""></div>
<p>....ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...ganz viel Text ...</p>
<script type="text/javascript">
startBanner();
</script>
</body>
</html>
===================
Grüße,
Utz