* camera image preload implemented

public/scripts/camera-image-handler.js

@@ -2,6 +2,16 @@ jQuery(document).ready(function () {
     var cameraImages = [];
     var cameraPointer = 0;
 
+    function preloadImages() {
+        $("#imagePreloader").empty();
+        jQuery.each(cameraImages, function(idx, cameraImage){
+            console.log(cameraImage);
+            var img = new Image();
+            img.src = cameraImageBaseUrl + cameraImage.camera + '/' + cameraImage.imageName;
+            document.getElementById("imagePreloader").appendChild(img);
+        });
+    }
+
     function changeImage(pointer) {
         $('#cameraImage').css(
             'background-image',
@@ -13,6 +23,7 @@ jQuery(document).ready(function () {
     function refreshCameraImages() {
         jQuery.get(cameraImageApiUrl, function (data) {
             cameraImages = data;
+            preloadImages();
         }).always(function () {
             window.setTimeout(refreshCameraImages, refreshInterval);
         });
@@ -21,6 +32,7 @@ jQuery(document).ready(function () {
     // initial image load
     jQuery.get(cameraImageApiUrl, function (data) {
         cameraImages = data;
+        preloadImages();
 
         changeImage(0);
         window.setTimeout(refreshCameraImages, refreshInterval);

templates/app/home-page.phtml

@@ -20,6 +20,10 @@
         color: #ffffff;
         text-shadow: -1px 0 #999999, 0 1px #999999, 1px 0 #999999, 0 -1px #999999;
     }
+
+    #imagePreloader {
+        display: none;
+    }
 </style>
 <?php $this->end() ?>
 
@@ -35,3 +39,4 @@
 <div id="cameraImage">
     <h1 id="cameraText"></h1>
 </div>
+<div id="imagePreloader"></div>