preload logo pictures

about.php

@@ -73,14 +73,47 @@
       });
     });
 
+
+    /*
+     *
+     * Pré-charger les images
+     *
+     */
+    var preloadImages = function (imgs, callback) {
+      var img;
+      var remaining = 6;
+      for (var i = 0; i < 6; i++) {
+        img = new Image;
+        img.onload = function () {
+            --remaining;
+            if (remaining <= 0) {
+                callback();
+            }
+            if (i == 0)
+              $("#gargoyle").attr("src", this.src)
+        };
+        d = new Date();
+        img.src = "images/logo.php?rank="+i+"&ts="+d.getTime();
+        imgs.push(img);
+      }
+    };
+
     /*
      * Faire varier l'image de la gargouille
      *
      */
+    var gargoyles = [];
     function changeGargoyle()
     {
-        d = new Date();
-        $("#gargoyle").attr("src", "images/logo.php?ts="+d.getTime());         
+        if (gargoyles.length == 0)
+        {
+          preloadImages(gargoyles, function(){
+            topistoConsole.log("All Gargoyles are loaded");
+          });
+        } else {
+          r = Math.floor(Math.random() * gargoyles.length);
+          $("#gargoyle").attr("src", gargoyles[r].src);         
+        }
     }
 
     /*
@@ -167,7 +200,7 @@
             <img id="gargoyle" src="images/logo.php" alt="avatar dragon gargoyle" width="100%; height: auto" style="opacity:0.4"></img>
         </div>
         -->
-        <img id="gargoyle" class="simple-parallax" src="images/logo.php" alt="avatar dragon gargoyle" width="100%; height: auto" style="margin-top:-50px"></img>
+        <img id="gargoyle" class="simple-parallax" src="images/logo.php" alt="avatar dragon gargoyle" width="100%; height: auto" style="margin-top:-100px"></img>
     </div>
   </div>
 </div>

articles/00190327/header.html

@@ -28,10 +28,9 @@
         Chaque lettre d'un texte est remplacée par sa position dans l'alphabet. 
         Les images sont vues comme des matrices de points, dont la couleur est codée suivant l'intensité de sa valeur RGB (Red, Green, Blue)
         <br><br>
-        La capacité de traitement des ordinateurs augmenta. 
-        Il fallait stocker toujours plus d'information pour alimenter les calculs qui, ainsi, devenaient de plus en plus pertinents. 
+        Lorsque la capacité de traitement des ordinateurs augmenta, il fallut stocker toujours plus d'information pour alimenter les calculs qui, ainsi, devenaient de plus en plus pertinents. 
         Pour couronner le tout, ce stockage était mal géré, de nombreuses copies d'un même fichier existaient, parfois intentionnellement (dans le but d'un assurer la conservation), parfois par manque de rigueur. 
-        La capacité de stockage devint un problème, au point de contribuer mettre la planète en péril. 
+        La capacité de stockage devint un problème, au point de contribuer à mettre la planète en péril. 
         Consommer toujours plus d'énergie, pour alimenter des datacenters de plus en plus nombreux. 
         Extraire des minerais rares pour fabriquer des composants électroniques en quantité astronomiques. Cela n'était clairement pas viable sur le long terme.
         <br><br>

images/logo.php

@@ -1,6 +1,9 @@
 <?php
 
-$alea=rand(0,100);
+// valeur par défaut
+$rank = -1;
+// Surcharge par les arguments
+extract($_REQUEST, EXTR_IF_EXISTS);
 
 $logo='topisto_vert_tr.png';
 
@@ -25,24 +28,26 @@ imagesavealpha($img,true);
 // copy the thumbnail into the output image.
 // imagecopyresampled($img,$block_image, 0, 0, 0, 0, $width, $height, $width, $height );
 
-if ($alea < 1000)
-{
-  $files = glob('logo/tr/topisto_*.png');
-  usort($files, function($a, $b) {
+$files = glob('logo/tr/topisto_*.png');
+usort($files, function($a, $b) {
   return filemtime($a) > filemtime($b);
-  });
+});
 
+if ($rank < 0)
+{
   shuffle($files);
- 
-  $superpose = @imagecreatefrompng($files[0]);
-
-  //imagecopymerge($img, $superpose, 0, 0, 0, 0, $width, $height, 50);
-
-  imagecopyresampled($img,$superpose, 0, 0, 0, 0, $width, $height, imagesx($superpose), imagesy($superpose));
-
-  imagedestroy($superpose);
+  $rank = 0;
 }
 
+// Borner l'index aux valeurs du tableau
+$rank = $rank % count($files);
+ 
+$superpose = @imagecreatefrompng($files[$rank]);
+
+imagecopyresampled($img,$superpose, 0, 0, 0, 0, $width, $height, imagesx($superpose), imagesy($superpose));
+
+imagedestroy($superpose);
+
 imagecopymerge($img, $block_image, 0, 0, 0, 0, $width, $height, 45);
 
 // ---