将预加载程序脚本重构为模块化

Question

如何重构下面给定的预加载程序脚本，使其模块化，并在页面中的许多部分中使用：

JS

$(window).load(function() {
        var preloaderDelay = 200,
            preloaderFadeOutTime = 800;

        function hidePreloader() {
            var loadingAnimation = $('#loading-animation'),
                preloader = $('#preloader');
            loadingAnimation.fadeOut();
            preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);

        }
        hidePreloader();
    });

CSS

#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; z-index: 9999; }
#loading-animation { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background: url(asset-path('assets/loading-animation.gif')) center center no-repeat; margin: -100px 0 0 -100px; }

Answer 1

我认为你可以这样做：

JS

$(function () {
    $.fn.preloader = function () {
        var objPreloader = $(this)
        objPreloader.prepend('<div class="preloader"> <div class="loading-animation"></div> </div>');

        $(window).load(function () {
            var preloaderDelay = 200,
                preloaderFadeOutTime = 800;

            function hidePreloader() {
                var loadingAnimation = objPreloader.find('.loading-animation') ,
                    preloader = objPreloader.find('.preloader');
                loadingAnimation.fadeOut();
                preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
            }
            hidePreloader();
        });
    };

    $('.section-a').preloader();
    $('.section-b').preloader();

});

CSS

.preloader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f4f3f3; z-index: 9999; }
.loading-animation { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background: url(asset-path('loading-animation.gif')) center center no-repeat; margin: -100px 0 0 -100px; }