javascript - 将预加载器脚本重构为模块化

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

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; }

最佳答案

我认为您可以这样做：

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; }