Guest User

Untitled

a guest
Jan 29th, 2013
87
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="EN">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>Prealoder test</title>
  6.         <script type="text/javascript" src="jquery.min.js"></script>
  7.         <style type="text/css">
  8.             img {
  9.                 display: block;
  10.                 margin-right: 10px;
  11.                 margin-bottom: 10px;
  12.                 width: 200px;
  13.                 float: left;
  14.             }
  15.             .preloader {
  16.                 background: #cc4400;
  17.                 color: #ffffff;
  18.                 font-weight: bold;
  19.                 font-family: Consolas, monospace;
  20.                 font-size: 12px;
  21.                 width: 120px;
  22.                 line-height: 24px;
  23.                 text-align: center;
  24.                 margin: 0 auto;
  25.                 clear: both;
  26.             }
  27.         </style>
  28.        
  29.         <script type="text/javascript">
  30.        
  31.             jQuery( document ).ready( function( $ ) {
  32.                 $( '#images_holder' ).hide();
  33.                 var images = $( 'img' ),
  34.                     no_images = images.length,
  35.                     loaded_images = 0,
  36.                     complete = [],
  37.                     preloader = $( '<div class="preloader">Loading <span></span></div>' ).appendTo( 'body' );                
  38.                
  39.                 var timer = setInterval( function() {
  40.                     if ( no_images <= loaded_images ) {
  41.                         clearInterval( timer );
  42.                         preloader.fadeOut( 'slow', function() {
  43.                             $( '#images_holder' ).fadeIn( 'slow' );
  44.                         });
  45.                         return;
  46.                     }
  47.                    
  48.                     $( images ).each( function( i, image ) {
  49.                         if ( image.complete ) {
  50.                             if ( complete[i] !== true ) {
  51.                                 complete[i] = true;
  52.                                 loaded_images++;
  53.                                 $( 'span', preloader ).text( Math.round( ( loaded_images / no_images ) * 100 ) + '%' );
  54.                             }                    
  55.                         }
  56.                     });
  57.                    
  58.                 }, 200 );
  59.             });        
  60.        
  61.         </script>
  62.        
  63.     </head>
  64.    
  65.     <body>
  66.         <div id="images_holder">
  67.             <img src="1.jpg" alt="pic 1" />
  68.             <img src="2.jpg" alt="pic 2" />
  69.             <img src="3.jpg" alt="pic 3" />
  70.             <img src="4.jpg" alt="pic 4" />
  71.             <img src="5.jpg" alt="pic 5" />
  72.             <img src="6.jpg" alt="pic 6" />
  73.             <img src="7.jpg" alt="pic 7" />
  74.             <img src="8.jpg" alt="pic 8" />
  75.             <img src="9.jpg" alt="pic 9" />
  76.             <img src="10.jpg" alt="pic 10" />
  77.             <img src="11.jpg" alt="pic 11" />
  78.         </div>
  79.     </body>
  80. </html>
RAW Paste Data