[Javascript] Setinterval bij zoomfunctie - Softwareontwikkeling

woensdag 8 november 2006 18:22

Acties:

Topicstarter

Ik heb de volgende (simpele) code om een "icoontjes-balk" ala Mac te simuleren :

HTML:

<html>
<head>
  <title></title>
  <style type="text/css">
#actions { border: 2px solid; width: 300px; height: 200px; overflow: auto; }
img { margin: 5px; }
  </style>
  <script type="text/javascript">
function Zoom(index){
  var X = ZoomObjects[index];
  var W = parseInt(X.style.width);
  var H = parseInt(X.style.height);
  if (X.zoom == 'in'  && W == 48 && H == 48) { clearInterval(X.zoomIN); return; }
  if (X.zoom == 'out' && W == 32 && H == 32) { clearInterval(X.zoomOUT); return; }
  if (X.zoom == 'in')  { W++; H++; }
  if (X.zoom == 'out') { W--; H--; }
  X.style.width = W;
  X.style.height= H;
}
function InitZoom() {
  ZoomObjects = document.images;
  for (var i=0; i<ZoomObjects.length; i++) {
    var Obj = ZoomObjects[i];
    Obj.style.width = 32;
    Obj.style.height= 32;
    Obj.index = i;
    Obj.onmouseover = function() {
      this.zoom = 'in'; addmsg("Image"+this.index+" [IN]");
      this.zoomIN = setInterval("Zoom("+this.index+")",20);
    }
    Obj.onmouseout  = function() {
      this.zoom = 'out'; addmsg(" => Image"+this.index+" [OUT]<br>");
      this.zoomOUT = setInterval("Zoom("+this.index+")",20);
    }
  }
}
function addmsg(msg) {
  var x = document.getElementById('actions');
  x.innerHTML += msg;
}
  </script>
</head>
<body onload="InitZoom();">
  <b>ACTIONS :</b>
  <div id="actions"></div>
  <br><br>
  <img src="pics/folder.gif">
  <img src="pics/video.gif">
  <img src="pics/audio.gif">
  <img src="pics/cmd.gif">
  <img src="pics/real.gif">
</body>
</html>

De icoontjes zijn 48x48, maar ik resize ze naar 32x32.
Als je muis er op staat "zoomen" ze naar de 48x48 en als je eraf gaat weer terug naar 32x32.
Op zich werkt het allemaal naar behoren, maar er viel me iets raars op...
De zoom-snelheid wordt bepaalt door Setinterval, maar na alle icoontjes 1x gehad te hebben lijkt "at random" 1 of meerdere icoontjes sneller in te zoomen

Iemand enig idee hoe dit kan ?

P.S. Ik zal zo even proberen een voorbeeld online te zetten...

edit:
Voorbeeld staat online => http://michielioz.awardspace.com/test.html

Iedereen wil terug naar de natuur, maar niemand wil lopend...

woensdag 8 november 2006 18:54

Acties:

djluc

De afbeeldingen preloaden in een image object misschien?

woensdag 8 november 2006 21:21

Acties:

MichielioZ

Topicstarter

Ok, ik de volgende functie toegevoegd :

HTML:

<script>
function PreloadImages() {
  var imgs = new Array();
  for (var i=0; i<document.images.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = document.images[i].src;
  }
}
</script>

Deze wordt als eerste aangeroepen in de functie InitZoom()... is goed neem ik aan ?!
Misschien kijk ik erg scheel onderhand

, maar volgens mij gebeurd het nog steeds...

edit:

Ik heb het voorbeeld (URL) even veranderd... nu wordt bij de onload eerst PreloadImages aangeroepen, die op zijn beurt weer InitZoom aanroept. (leek me netter)
Hoe dan ook lijkt het wel hiermee te maken te hebben, want als je een paar keer snel over de hele reeks plaatjes gaat met je muis, heb je bij elk plaatje die "instant zoom" ipv de "rustige"...
Doe ik iets fout bij de PreloadImages, of is er iets fout in m'n Zoom-functie ??

Sorry voor de kick net binnen de 24 uur, maar anders is straks iedereen gaan slapen

Het lijkt erop dat als je dus snel over alle icoontjes heengaat, er geen "zoom" meer plaatsvindt, maar dat ze direct van klein naar groot en terug gaan...
Als iemand me uberhaupt in de richting kan wijzen, want ik zie door de bomen 't bos niet meer

Toch maar gewoon editten als je de laatste bent die post

[ Voor 54% gewijzigd door BtM909 op 09-11-2006 20:42 ]

Iedereen wil terug naar de natuur, maar niemand wil lopend...

vrijdag 10 november 2006 15:05

Acties:

MichielioZ

Topicstarter

Ok, m'n topic "kicken" mocht dus niet, maar misschien mag ik mijn gevonden oplossing wel geven (ondanks dat ik de laatste was met een post)

De functie setTimeout probeer ik altijd te vermijden als ik ook setInterval kan gebruiken, maar in dit geval blijkt ie voor mij een oplossing te bieden...
Hopelijk hebben andere mensen er iets aan ?!

HTML:

<html>
<head>
  <title></title>
  <style type="text/css">
img { margin: 5px; }
  </style>
  <script type="text/javascript">
function Zoom(index){
  var X = ZoomObjects[index];
  if (X.zoom == 'in'  && X.width == 48 && X.height == 48) { X.zoom = false; return; }
  if (X.zoom == 'out' && X.width == 32 && X.height == 32) { X.zoom = false; return; }
  if (X.zoom == 'in')  { X.width++; X.height++; setTimeout("Zoom("+index+")",10); }
  if (X.zoom == 'out') { X.width--; X.height--; setTimeout("Zoom("+index+")",10); }
}

function InitZoom() {
  ZoomObjects = document.images;
  for (var i=0; i<ZoomObjects.length; i++) {
    ZoomObjects[i].width = 32;
    ZoomObjects[i].height= 32;
    ZoomObjects[i].index = i;
    ZoomObjects[i].onmouseover = function() {
      this.zoom = 'in'; Zoom(this.index);
    }
    ZoomObjects[i].onmouseout  = function() {
      this.zoom = 'out'; Zoom(this.index);
    }
  }
}
  </script>
</head>
<body onload="InitZoom();">
  <img src="pics/folder.gif">
  <img src="pics/video.gif">
  <img src="pics/audio.gif">
  <img src="pics/cmd.gif">
  <img src="pics/real.gif">
</body>
</html>

Iedereen wil terug naar de natuur, maar niemand wil lopend...