[JS] Image fade, maar flikkert in FF? - Softwareontwikkeling

dinsdag 23 januari 2007 01:56

Acties:

Topicstarter

Hoi!

nou om maar met de deur in huis te vallen, ik heb vanavond een scriptje geschreven dat images voor mij laat faden. Die afbeeldingen worden in een array gezet door PHP en dan aan Javascript geschreven.

HTML:

<?
$images    = array();
$image_dir = './images/enter/';
$handle    = opendir($image_dir);

while(($file = readdir($handle)) !== false)
  {
    if (is_file ($image_dir.$file))
      {
        $imageinfo = getimagesize($image_dir.$file);

        if ($imageinfo[2] == IMAGETYPE_JPEG)
          array_push ($images, $image_dir.$file);
      }
  }

closedir($handle);

sort($images);
$image_array .= '"'.$images[0].'",';

foreach($images as $image)
  $image_array .= '"'.$image.'",';

$image_array = substr($image_array, 0, -1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Axel Grunnekemeijer</title>
  <link rel="stylesheet" type="text/css" href="./stylesheets/stylesheet.css">
  <link rel="stylesheet" type="text/css" href="./stylesheets/navigation.css">
  <link rel="stylesheet" type="text/css" href="./stylesheets/content.css">
  <script language="javascript">
    var index        = 0;
    var opacity      = 100;
    var image_array  = new Array(<?=$image_array?>);

    var fader;
    var background;
    var foreground;

    function fade_images ()
      {  
        opacity = 100;
        
        fader      = document.getElementById('fader');
        background = document.getElementById('fader_background');
        foreground = document.getElementById('fader_foreground');

        foreground.src = image_array[index];

        index++;
        if (index >= image_array.length)
          index = 1;

        background.src = image_array[index];

        fade ();

        window.setTimeout('fade_images ()', 3000);
      }

    function fade ()
      {
        if (opacity >= 0)
          {           
            fader.style.opacity = opacity / 100;
            fader.style.filter  = 'alpha (opacity = ' + opacity + ')';

            opacity = opacity - 5;
            window.setTimeout('fade ()', 50);
          }
      }
  </script>
</head>
<body onload="fade_images()">
  <div id="header">&shy;</div>
  <div id="container"><a href="./main.php"><img src="<?=$images[0]?>" alt="enter" id="fader_background"></a></div>
  <div id="fader"><a href="./main.php"><img src="<?=$images[0]?>" alt="enter" id="fader_foreground"></a></div>
  <div id="footer">
    <div><a href="main.php">[Enter]</a></div>designed by Jaap Koekkoek &copy; 2007</div>
</body>
</html>

Het werkt helemaal perfect, op 1 klein dingetje na, als hij in firefox draait, dan lijkt het erop dat zodra de afbeeldingen gecached zijn, ze elke keer vlak voor de wissel een keer flikkeren. IE heeft er geen last van. Hij laat snel het komen plaatje zien. Dit terwijl de andere div die erboven op ligt op moment alweer op 100% opacity staat.

Wie o wie kan me helpen?

Live example: http://www.axeldrums.com/

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

dinsdag 23 januari 2007 09:17

Acties:

André

Analytics dude

Komt dat misschien omdat je het voorgrond plaatje naar de background plaatst om de nieuwe in de voorgrond te plaatsen? Misschien kun je beter ipv met voor- en achtergrond te werken de z-index van de layer veranderen zodat je geen plaatjes hoeft te verplaats van layer.

dinsdag 23 januari 2007 09:50

Acties:

crisp

Devver

Pixelated

volgens mij was de workaround ervoor zorgen dat de opacity niet helemaal 0 kon worden (maar bijvoorbeeld 0.01) - kan ook zijn dat het probleem juist rond de 100 zat

Intentionally left blank

dinsdag 23 januari 2007 12:24

Acties:

k0ewl

Topicstarter

Ik heb ook gelezen dat het kwam door de opacity niet 100 te laten worden, maar dat heb ik geprobeerd en het hielp niet.

de z-index ga ik vanavond dan nog even verder mee kloten, want moet nu eerstmet school verder.

klote project.

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."