- 16.11.2014 11:54
- ← Назад к списку
Простая реализация прелоадера, будет полезна под рукой любому веб разработчику.
Создаем файл 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);