show loading notice while images load

README.md

@@ -42,7 +42,7 @@ Angular JS.
 ```
 2. Include **threesixty** directive in HTML. Set image list using `images` attribute.
 ```html
-<threesixty images="imageList" animate-after-loading="true" speed-multiplier="20">
+<threesixty images="imageList" animate-after-loading="true" speed-multiplier="20" loading-notice="true">
 ```
 
 3. Trigger a rotation by emitting the event `threesixty-animate` to the directive scope

src/regthreesixty.css

@@ -26,3 +26,11 @@
 .reg-threesixty img.current{
   visibility: visible;
 }
+
+.reg-threesixty-loading {
+  position: absolute;
+  z-index: 1;
+  background-color: blue;
+  color: white;
+  width: 100%;
+}

src/regthreesixty.js

@@ -9,14 +9,16 @@
 angular.module('reg.threesixty', [])
   .directive('threesixty', ['$document', '$window',function ($document, $window) {
     return {
-      template: '<div class="reg-threesixty"></div>',
+      template: '<div class="reg-threesixty"><div class="reg-threesixty-loading"></div></div>',
       restrict: 'E',
       replace:true,
       scope:{
         images: '=',
         reverse: '=',
         animateAfterLoading: '=',
-        speedMultiplier: '='
+        speedMultiplier: '=',
+        loadingMessage: '=',
+        loadingNotice: '='
       },
       link: function(scope, element, attrs) {
 
@@ -38,6 +40,7 @@ angular.module('reg.threesixty', [])
         var monitorInt = 0;
         var speedMultiplier = scope.speedMultiplier ? parseInt(scope.speedMultiplier) : 20;
         var ROTATION_EVENT = 'threesixty-animate';
+        var loadingMessage = scope.loadingMessage ? scope.loadingMessage : 'Loading images...';
 
         var adjustHeight = function(){
           if( loadedImages > 0 ){
@@ -48,6 +51,13 @@ angular.module('reg.threesixty', [])
           }
         };
 
+        // setup loading notice
+        if (scope.loadingNotice) {
+          $('.reg-threesixty-loading').html(loadingMessage);
+        } else {
+          $('.reg-threesixty-loading').remove();
+        }
+
         angular.element($window).on('resize', adjustHeight );
 
         var load360Images = function(){
@@ -72,6 +82,11 @@ angular.module('reg.threesixty', [])
             if (scope.animateAfterLoading) {
               refresh();
             }
+
+            // remove loading notice
+            if (scope.loadingNotice) {
+              $('.reg-threesixty-loading').remove();
+            }
           }
         };