Untitled

<!DOCTYPE html>
<html lang="EN">
    <head>
        <meta charset="utf-8" />
        <title>Prealoder test</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <style type="text/css">
            img {
                display: block;
                margin-right: 10px;
                margin-bottom: 10px;
                width: 200px;
                float: left;
            }
            .preloader {
                background: #cc4400;
                color: #ffffff;
                font-weight: bold;
                font-family: Consolas, monospace;
                font-size: 12px;
                width: 120px;
                line-height: 24px;
                text-align: center;
                margin: 0 auto;
                clear: both;
            }
        </style>

        <script type="text/javascript">

            jQuery( document ).ready( function( $ ) {
                $( '#images_holder' ).hide();
                var images = $( 'img' ),
                    no_images = images.length,
                    loaded_images = 0,
                    complete = [],
                    preloader = $( '<div class="preloader">Loading <span></span></div>' ).appendTo( 'body' );

                var timer = setInterval( function() {
                    if ( no_images <= loaded_images ) {
                        clearInterval( timer );
                        preloader.fadeOut( 'slow', function() {
                            $( '#images_holder' ).fadeIn( 'slow' );
                        });
                        return;
                    }

                    $( images ).each( function( i, image ) {
                        if ( image.complete ) {
                            if ( complete[i] !== true ) {
                                complete[i] = true;
                                loaded_images++;
                                $( 'span', preloader ).text( Math.round( ( loaded_images / no_images ) * 100 ) + '%' );
                            }
                        }
                    });

                }, 200 );
            });

        </script>

    </head>

    <body>
        <div id="images_holder">
            <img src="1.jpg" alt="pic 1" />
            <img src="2.jpg" alt="pic 2" />
            <img src="3.jpg" alt="pic 3" />
            <img src="4.jpg" alt="pic 4" />
            <img src="5.jpg" alt="pic 5" />
            <img src="6.jpg" alt="pic 6" />
            <img src="7.jpg" alt="pic 7" />
            <img src="8.jpg" alt="pic 8" />
            <img src="9.jpg" alt="pic 9" />
            <img src="10.jpg" alt="pic 10" />
            <img src="11.jpg" alt="pic 11" />
        </div>
    </body>
</html>