Plaatje laten knipperen, lukt niet.

**MediaServe** · 09/11/06 21:43

Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="nl" lang="nl">
<head>
<title>Mijn Pagina</title>
<script type="text/javascript">
<!--
  function blinkImages() {
    blinkArray = new Array();
    blinkElements = document.getElementsByTagName('*');
    for(x = 0; x < blinkElements.length; x++) {
      blinkElement = blinkElements[x];
      elementClass = blinkElement.className;
      if(elementClass == 'blink') {
        if(blinkElement.style.visibility == 'hidden'){
          blinkElement.style.visibility = 'visible';
        } else {
          blinkElement.style.visibility = 'hidden';
        }
      }
    }
    setTimeout("blinkImages();", 250);
  }
// -->
</script>
</head>
<body onload="blinkImages();">
<h1>Welkom op Mijn Pagina</h1>
<div>
<img src="plaatje1.gif" alt="Plaatje 1" class="blink" /><br />
Plaatje 1<br />
<img src="plaatje1.gif" alt="Plaatje 2" class="blink" /><br />
Plaatje 2<br />
<img src="plaatje1.gif" alt="Plaatje 3" class="blink" /><br />
Plaatje 3<br />
</div>
</body>
</html>

**B3rt** · 10/11/06 01:24

thx, dit werkt prima!

**B3rt** · 10/11/06 18:56

Correctie....

Het script werkt alleen met als resultaat dat de cpu load bijna 100% is als je op de pagina komt waar deze code wordt gebruikt (cpu load van je eigen pc dus, niet de server)

**ol4pro** · 10/11/06 21:13

Misschien gaat er iets fout in je code..

vind dat javascriptje wel grappig

**mpk** · 13/11/06 00:23

Ik zou er zoiets van maken als dit is hoe je't wilt doen. Scheelt je vast een paar cpu cycles.

Code:

(function() {
    var blinkElements = document.getElementsByTagName('img');
    var blinkElement = null;    

    window.setTimeout(
      function() {
        for(var i=0; i<blinkElements.length; i++) {
          blinkElement = blinkElements[x];      
          ((blinkElement.className == 'blink') &&
              (blinkElement.style.visibility = (blinkElement.style.visibility == 'hidden') ? 'visible' : 'hidden'));
        }
    }, 500);

})();

Niet getest. Maar zou wel moeten werken. Ongeveer.

**Dennie-DeTi** · 13/11/06 08:12

Oorspronkelijk geplaatst door MediaServe

Code:

    blinkElements = document.getElementsByTagName('*');

Misschien is het in ieder geval al beter om alleen de images te doen in plaats van alle elementen:

Code:

    blinkElements = document.getElementsByTagName('img');

- Dennie

**MediaServe** · 13/11/06 10:18

Je kunt de array ook eenmalig aanmaken natuurlijk

Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="nl" lang="nl">
<head>
<title>Mijn Pagina</title>
<script type="text/javascript">
<!--
  function initBlinking() {
    blinkArray = new Array();
    blinkElements = document.getElementsByTagName('*');
    setTimeout("blinkImages();", 250);
  }

  function blinkImages() {
    for(x = 0; x < blinkElements.length; x++) {
      blinkElement = blinkElements[x];
      elementClass = blinkElement.className;
      if(elementClass == 'blink') {
        if(blinkElement.style.visibility == 'hidden'){
          blinkElement.style.visibility = 'visible';
        } else {
          blinkElement.style.visibility = 'hidden';
        }
      }
    }
    setTimeout("blinkImages();", 250);
  }
// -->
</script>
</head>
<body onload="initBlinking();">
<h1>Welkom op Mijn Pagina</h1>
<div>
<img src="plaatje1.gif" alt="Plaatje 1" class="blink" /><br />
Plaatje 1<br />
<img src="plaatje1.gif" alt="Plaatje 2" class="blink" /><br />
Plaatje 2<br />
<img src="plaatje1.gif" alt="Plaatje 3" class="blink" /><br />
Plaatje 3<br />
</div>
</body>
</html>

**mpk** · 15/11/06 23:55

ol4pro heeft vaker met dit bijltje gehakt, zie ik

Ik heb hierboven ook een ongeteste blok code gedumpt, maar ik zal even een paar dingen hier aanwijzen in de code van MediaServe (die werkt namelijk gewoon als je'm in de browser inlaadt

omdat ik al een tijdje javascript heb lopen optimalizeren.

Eerst even een paar punten,

- Interacties met de DOM zijn duur. Dat geldt zeker voor queries. DOM referenties cachen waar mogelijk. Probeer 'getElementByX' te beperken tot kleine fragmenten.

- Variabelen moet je declareren, want anders gaat de interpreter de complete scope doorlopen om te kijken of 'ie al elders gedefinieerd is (en vaak schop je dan een variabele overhoop uit een andere scope).

Oorspronkelijk geplaatst door MediaServe

Je kunt de array ook eenmalig aanmaken natuurlijk

Uitstekend plan

Code:

  function initBlinking() {
    blinkArray = new Array();

Deze Array wordt verder niet meer gebruikt, dus die kan je weglaten.
Maar ik zou er dus dit van maken,

Code:

    var blinkArray = [];

Hier haal je het complete document mee op, iets meer dan je nodig hebt

Code:

    var blinkElements = document.getElementsByTagName('*');

Dit is iets wat bijna iedereen doet - een string meegeven als eerste argument aan setTimeout.
Om deze functie uit te voeren moet de interpreter dus een 'eval' uitvoeren. Het is beter om gewoon een function mee te geven.

Dus in plaats van,

Code:

    setTimeout("blinkImages();", 250);

Code:

    setTimeout(blinkImages, 250);

Alleen wordt 'blinkImages pas hierna gedefinieerd. Dus beter zet je deze functie erachter. Wisselt per interpreter, maar kwaad kan het niet.

Code:

  }

  function blinkImages() {

[code]
Wederom, variabelen declareren, dus

Code:

    for(var x = 0; x < blinkElements.length; x++) {

In plaats van,

Code:

    for(x = 0; x < blinkElements.length; x++) {

Deze ook declareren als ze nodig zijn

Code:

      blinkElement = blinkElements[x];
      elementClass = blinkElement.className;

Dus,

Code:

      var blinkElement = blinkElements[x];
      var elementClass = blinkElement.className;

Of beter nog, voor de for loop ze declareren en 'assignen' binnen de loop zonder 'var' declaratie.

Code:

      if(elementClass == 'blink') {
        if(blinkElement.style.visibility == 'hidden'){
          blinkElement.style.visibility = 'visible';
        } else {
          blinkElement.style.visibility = 'hidden';
        }

'property lists' langs wandelen kost ook CPU tijd, dus als je iets meer dan een keer gebruikt is het vaak rendabel om een 'temp' variabele buiten de loop te declareren en dan zoiets te doen,

Code:

var tmp = null;
for (bla) {
   tmp = blink.style.visibility;
   tmp =  (tmp == 'hidden') ? 'visible' : 'hidden';
}

Code:

      }
    }
    // Wederom string als argument, zie boven
    setTimeout("blinkImages();", 250);
  }

Ik zie in deze code dat er twee keer setTimeout aangeroepen wordt en dat ik ook setTimeout in mijn eigen code dump hierboven gebruikt heb. Tsk, tsk, slechte mpk (zal wel een lange dag geweest zijn). Javascript heeft een functie 'setInterval'. Gebruik die hier in plaats van 'setTimeout'.

Dan hoef je'm niet 2x te gebruiken en dan zou mijn code misschien ook wel werken

**Peuk** · 15/11/06 23:57

Waarom niet gewoon met Adobe ImageReady?
Net zo makkelijk wat frames toevoegen..

**mpk** · 16/11/06 00:18

En omdat ik toch over die eval in 'setTimeout', 'setInterval' zat te zeuren, nog even dit..

Code:

window.onload = function() {
  if (document.all) {
    window.setInterval(function(document.getElementByTagName("blinkme")) { /* XXX* /}, 200);
  } 
}

Of,

Code:

window.onload = function() {
  ((document.all) &&
    (window.setInterval(
        function(document.getElementByTagName("blinkme")) { 
          /* XXX* /}, 
        200
       )
     )
  } 
}

**MediaServe** · 16/11/06 00:40

Nette aanvulling mpk

Zoals je ziet is Javascript niet mijn dagelijkse bezigheid

**B3rt** · 16/11/06 00:48

Oorspronkelijk geplaatst door Peuk

Waarom niet gewoon met Adobe ImageReady?
Net zo makkelijk wat frames toevoegen..

Omdat de plaatjes dynamisch zijn.
Het zijn live grafieken/statistieken die worden gegenereerd door een ander programma.
Dus refresh je de pagina heb je weer een ander plaatje, dit kan dus nooit met adobe.

@mpk:
Ik kan zelf helemaal niets van javascript, zou je me eens het hele script (geoptimaliseerd) willen posten hier in 1 voorbeeld code?

**mpk** · 16/11/06 00:51

Oorspronkelijk geplaatst door MediaServe

Nette aanvulling mpk

Zoals je ziet is Javascript niet mijn dagelijkse bezigheid

Dank je

Was het van mij eerst ook niet, maar ik ben er de laatste tijd met werk veel mee bezig geweest. Commentaar was geen kritiek op jouw code maar wat opmerkingen over hoe je het zou kunnen optimalizeren. Blij dat je het de moeite waard vond

.

Oorspronkelijk geplaatst door B3rt

Omdat de plaatjes dynamisch zijn.
@mpk:
Ik kan zelf helemaal niets van javascript, zou je me eens het hele script (geoptimaliseerd) willen posten hier in 1 voorbeeld code?

Uh, ja en nee. Er bestaat geen 'hele script' omdat ik het maar als pseudo code geschreven heb. Post even een HTML fragment waar je de code over wil laten lopen en ik schrijf wel een stukje javascript wat het voor je doet (met uitleg).

**B3rt** · 16/11/06 03:40

Nou die code is in PHP maargoed dat is ook maar een klein stukje:

PHP Code:


$server_statspageget = locatie plaatje uit database;
echo "<tr>";
while (list($server_naam,$server_statspageget,$bla, etc etc) = mysql_fetch_row($sql)) {
echo "<td><center><b>$server_naam<br><img src=\"$server_statspageget\" border=\"0\"></b></center></td>\n";
} // einde while
echo "</tr>\n";

Als een bepaalde waarde 0 is in de database dan moet dit plaatje van hierboven beginnen te knipperen, is de waarde 1 dan moet er niks gebeuren.
Deze code genereert ca 20 plaatjes.

Zoals ik al zei, veel code is er niet wat ik kan laten zien.
Het is puur het opbouwen van een table via PHP met daarin een plaatje met een grafiek, als in de database dan een waarde 0 is moet dat plaatje knipperen is het 1 dan moet er niets gebeuren en normaal zichtbaar zijn.
De code van mediaserve deed het dus prima alleen mijn eigen systeem (dus van de bezoeker) begon bijna 100% cpu load te trekken en de hele pc werd traag, de webserver zelf had geen problemen.

**mpk** · 16/11/06 10:37

Er ven van uit gaan dat je zoiets krijgt,

Code:

<html>
  <head>
    <script type="text/javascript" src="blink.js"></script>
  </head>
  <body>
    <tr>
      <td><center><b>Server 1<br><img class="" src="ok.gif" border="0"></b></center></td>
      <td><center><b>Server 2<br><img class="blink" src="nok.gif" border="0"></b></center></td>
      <td><center><b>Server 3<br><img class="blink" src="nok.gif" border="0"></b></center></td>
      <td><center><b>Server 4<br><img class="blink" src="nok.gif" border="0"></b></center></td>
    </tr>
  </body>
</html>

In de file blink.js..

Code:

window.onload = function() {

  var blinkElements = document.getElementsByTagName('img');
  var blinkElement = null;

  window.setInterval(
    function() {
      for(var i=0; i<blinkElements.length; i++) {
        blinkElement = blinkElements[i];
        ((blinkElement.className == 'blink') &&
         (blinkElement.style.visibility = (blinkElement.style.visibility == 'hidden') ? 'visible' : 'hidden'));
      }
    }, 500
  );
};

Getest in FF 1.5, 2.0 en Opera.

Oorspronkelijk geplaatst door B3rt

De code van mediaserve deed het dus prima alleen mijn eigen systeem (dus van de bezoeker) begon bijna 100% cpu load te trekken en de hele pc werd traag, de webserver zelf had geen problemen.

Als je de performance wil testen zonder een profiler te gebruiken, verander de waarde '500'. Dat is het interval in milliseconden waarop de functie aangeroepen wordt. Neem, zeg, '5' of '1'.

Onderwerp Gereedschap

Toon

Onderwerp: Plaatje laten knipperen, lukt niet.

Webhostingtalk.nl

Link met ons

Partners

Contact