Прелоадер

Простая реализация прелоадера, будет полезна под рукой любому веб разработчику.

Создаем файл preloader.js

Содержимое preloader.js


function showPreloader(selector)
{
    if ($(selector).length == 0)
        false;
       
    var preloaderId = $('div.system-preloader').length + 2;
    var width = $(selector).outerWidth();
    var height = $(selector).outerHeight(true);
    var left = $(selector).offset().left;
    var top = $(selector).offset().top;

    var preloaderPopupDiv = $("
", {'class': 'preloader-popup-div', 'id': 'preloader-popup-div-'+preloaderId}).css({ 'left': left, 'top': top, 'width': width, 'height': height }); var preloaderDiv = $("
", {'class': 'preloader-div', 'id': 'preloader-div-'+preloaderId}).css({ 'left': (left + width / 2 - 60 / 2), 'top': (top + height / 2 - 60 / 2), 'width': 60, 'height': 60 }); $('body').append(preloaderPopupDiv).append(preloaderDiv); return preloaderId; } function hidePreloader(preloaderId) { if (typeof(preloaderId) == 'undefined') { $('.preloader-popup-div').remove(); $('.preloader-div').remove(); } else { $('#preloader-popup-div-'+preloaderId).remove(); $('#preloader-div-'+preloaderId).remove(); } }

Создаем файл preloader.css

.preloader-popup-div {
	background: url("путь_к_изображению/popup_background.png") repeat scroll 50% 50% #EEEEEE;
	background-color: #f5f5f5;
    opacity: 0.8;
	position:absolute;
	filter:alpha(opacity=80); 
	z-index:2000;
	min-width: 65px;
	min-height: 65px;
}
	
.preloader-div {
	background: transparent url('путь_к_изображению/progress.gif') no-repeat center center;
    opacity: 0.5;
	position:absolute;
	filter:alpha(opacity=50); 
	z-index:2000;
}

"путь_к_изображению" нужно заменить на Ваш путь до изображения

Сами изображения






Использование

На нужной нам странице подключаем preloader.js и preloader.css

//для подключения
var my_preload = showPreloader('.popup-registration');

//для выключения прелоадера
hidePreloader(my_preload);