Merge pull request brutaldesign#147 from stackcoder/pull-request-loading-animation

Hide loading animation after media has been loaded

Author: Constantin Saguin

scss/swipebox.scss

@@ -45,7 +45,6 @@ html.swipebox-html.swipebox-touch {
 	display: none;
 
 	.slide {
-		background: url(../img/loader.gif) no-repeat center center;
 		height: 100%;
 		width: 100%;
 		line-height: 1px;
@@ -96,6 +95,10 @@ html.swipebox-html.swipebox-touch {
 			}
 		}
 	}
+	
+	.slide-loading {
+		background: url(../img/loader.gif) no-repeat center center;
+	}
 
 }
 
@@ -240,4 +243,4 @@ html.swipebox-html.swipebox-touch {
 	font-size: 15px;
 	line-height: 43px;
 	font-family: Helvetica, Arial, sans-serif;
-}
+}

src/css/swipebox.css

@@ -35,13 +35,15 @@ html.swipebox-html.swipebox-touch {
   -webkit-backface-visibility: hidden;
 }
 #swipebox-slider .slide {
-  background: url(../img/loader.gif) no-repeat center center;
   height: 100%;
   width: 100%;
   line-height: 1px;
   text-align: center;
   display: inline-block;
 }
+#swipebox-slider .slide-loading {
+  background: url(./loader.gif) no-repeat center center;
+}
 #swipebox-slider .slide:before {
   content: "";
   display: inline-block;

src/js/jquery.swipebox.js

@@ -680,12 +680,16 @@
 					return false;
 				}
 
+				var slide = $( '#swipebox-slider .slide' ).eq( index );
+
 				if ( ! $this.isVideo( src ) ) {
+					slide.addClass( 'slide-loading' );
 					$this.loadMedia( src, function() {
-						$( '#swipebox-slider .slide' ).eq( index ).html( this );
+						slide.removeClass( 'slide-loading' );
+						slide.html( this );
 					} );
 				} else {
-					$( '#swipebox-slider .slide' ).eq( index ).html( $this.getVideo( src ) );
+					slide.html( $this.getVideo( src ) );
 				}
 
 			},