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>