From 51020fea6bf09f72612d2a85c20edab73837b04d Mon Sep 17 00:00:00 2001
From: Josh de Leeuw <josh.deleeuw@gmail.com>
Date: Tue, 12 Nov 2013 12:46:21 -0500
Subject: [PATCH] adding preloading

---
 examples/jspsych-animation.html | 63 ++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 20 deletions(-)
diff --git a/examples/jspsych-animation.html b/examples/jspsych-animation.html
index 21826270..e9296c1e 100644
--- a/examples/jspsych-animation.html
+++ b/examples/jspsych-animation.html
@@ -1,39 +1,62 @@
 <!doctype html>
 <html>
+    
     <head>
         <title>jspsych-text plugin example</title>
         <!-- jQuery -->
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <!-- jsPsych -->
         <script src="scripts/jspsych.js"></script>
         <script src="scripts/plugins/jspsych-animation.js"></script>
         <!-- style -->
         <style>
-            #jspsych_target { margin: 50px auto 50px auto; width: 600px; font-size:18px; text-align: center;}
-            #instructions { text-align: left; }
-            pre { text-align: left; }
+            #jspsych_target {
+                margin: 50px auto 50px auto;
+                width: 600px;
+                font-size:18px;
+                text-align: center;
+            }
+            #instructions {
+                text-align: left;
+            }
+            pre {
+                text-align: left;
+            }
         </style>
     </head>
+    
     <body>
-        <div id="jspsych_target">
-        </div>
+        <div id="jspsych_target"></div>
     </body>
     <script type="text/javascript">
         // declare variable to hold animation sequence
-        var animation_sequence = ["img/face_1.jpg","img/face_2.jpg","img/face_3.jpg","img/face_4.jpg","img/face_3.jpg","img/face_2.jpg"];
-        
+        var animation_sequence = ["img/face_1.jpg", "img/face_2.jpg", "img/face_3.jpg", "img/face_4.jpg", "img/face_3.jpg", "img/face_2.jpg"];
+
         // create animation block for jspsych
-        var animation_block = {type:'animation', stimuli: [animation_sequence], repetitions:3};
-        
-        // launch jspsych experiment
-        jsPsych.init({
-            display_element: $('#jspsych_target'),
-            experiment_structure: [animation_block],
-            on_finish:function(data){
-                $('#jspsych_target').append($("<pre>",{
-                    html: JSON.stringify(data,undefined,2)
-                }));
-            }
-        });
+        var animation_block = {
+            type: 'animation',
+            stimuli: [animation_sequence],
+            repetitions: 3
+        };
+
+        // preload images for animation sequence
+        // call start() when loading is complete
+        jsPsych.preloadImage(animation_sequence, start)
+
+        // function to launch jspsych experiment
+        // putting this in a function so that it only gets called once all the
+        // images are loaded using preloadImages
+        function start() {
+            jsPsych.init({
+                display_element: $('#jspsych_target'),
+                experiment_structure: [animation_block],
+                on_finish: function(data) {
+                    $('#jspsych_target').append($("<pre>", {
+                        html: JSON.stringify(data, undefined, 2)
+                    }));
+                }
+            });
+        }
     </script>
+
 </html>
\ No newline at end of file
