From 8dd6659bf8632ad63da44e4478bc9ea841023f5b Mon Sep 17 00:00:00 2001
From: MEUNIER Thibaud <thibaud.meunier@laposte.net>
Date: Thu, 9 Jan 2020 09:06:31 +0100
Subject: [PATCH] preload logo pictures

---
 about.php                     | 39 ++++++++++++++++++++++++++++++++---
 articles/00190327/header.html |  5 ++---
 images/logo.php               | 31 ++++++++++++++++------------
 3 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/about.php b/about.php
index 027c4f9..de50c2a 100644
--- a/about.php
+++ b/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>
diff --git a/articles/00190327/header.html b/articles/00190327/header.html
index 4798b3e..800c61e 100644
--- a/articles/00190327/header.html
+++ b/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>
diff --git a/images/logo.php b/images/logo.php
index d8b2098..9e7e57e 100644
--- a/images/logo.php
+++ b/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,23 +28,25 @@ 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) {
-    return filemtime($a) > filemtime($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]);
+  $rank = 0;
+}
 
-  //imagecopymerge($img, $superpose, 0, 0, 0, 0, $width, $height, 50);
+// 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));
+imagecopyresampled($img,$superpose, 0, 0, 0, 0, $width, $height, imagesx($superpose), imagesy($superpose));
 
-  imagedestroy($superpose);
-}
+imagedestroy($superpose);
 
 imagecopymerge($img, $block_image, 0, 0, 0, 0, $width, $height, 45);