Preloader

Оверлей на сайте, пока не загрузятся все картинки и айфреймы.

HTML

<div id="wrapper">
    <iframe width="200" height="100" src="http://www.youtube.com/embed/LvHYCIZGmlw?wmode=transparent" frameborder="0" allowfullscreen></iframe>
    <iframe width="200" height="100" src="http://www.youtube.com/embed/79sfBx-11Bs?wmode=transparent" frameborder="0" allowfullscreen></iframe>
    <iframe width="200" height="100" src="http://www.youtube.com/embed/J0CT-dork7o?wmode=transparent" frameborder="0" allowfullscreen></iframe>
    <iframe width="200" height="100" src="http://www.youtube.com/embed/e4TLUZGOHx0?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.preloader-init,
.preloader-init body {
    overflow: hidden;
}
.preloader-init #wrapper {
    visibility: hidden;
}
.preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: #2e2e2e;
    color: #fff;
    font-size: 20px;
    line-height: 80px;
    text-align: center;
}

JavaScript

var Preloader = (function($) {
    document.documentElement.className += ' preloader-init';
    
    var Preload = function (options) {
        this.defaults = {
            selectorPreload: 'body',
            overlay: '<div class="preloader"></div>',
            timeout: 0,
            startLoad: null,
            loadingItem: null,
            endLoading: null
        }
        this.init(options);
    }
    
    Preload.prototype = {
        init: function(options) {
            var self = this;
            self.options = $.extend(self.defaults, options);
            $(function() {
                self.getElements();
                self.buildStructure();
                self.getItems();
                self.createLoading();
            });
        },
        getElements: function() {
            this.overlay = $(this.options.overlay);
            this.selectorPreload = $(this.options.selectorPreload);
            this.items = this.selectorPreload.add(this.selectorPreload.find('*:not(script)'));
        },
        buildStructure: function() {
            this.overlay.appendTo(this.selectorPreload);
            this.loaderHolder = $('<div>', {
                css: {
                    width: 1,
                    height: 1,
                    position: 'absolute',
                    left: -10,
                    top: -10,
                    overflow: 'hidden',
                    visibility: 'hidden'
                }
            });
            
            this.loaderHolder.appendTo(document.body);
            
            this.imagesUrl = [];
            this.iframes = $();
            
            this.loadInd = 0;
            this.percent = 0;
            this.allLength = 100;
            
            this.imgRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i;
            //TODO:
            //this.swfRegExp = /[^\.]\.(swf)\s*$/i;
        },
        getItems: function() {
            var self = this;
            
            self.items.each(function() {
    ...