Hide loading animation after media has been loaded

Showing the animation looks realy annoying behind smaller images or images with transparent parts.

Author: stackcoder

src/css/swipebox.css

@@ -31,13 +31,15 @@ html.swipebox-html.swipebox-touch {
   display: none;
 }
 #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

@@ -597,12 +597,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 ) );
 				}
 
 			},