Question

当我的网站开始加载时，它应显示加载到我的网站加载时。为此，我使用了jQuery插件。以下是js文件

/*
 * jQuery showLoading plugin v1.0
 * 
 * Copyright (c) 2009 Jim Keller
 * Context - http://www.contextllc.com
 * 
 * Dual licensed under the MIT and GPL licenses.
 *
 */

    jQuery.fn.showLoading = function(options) {

        var indicatorID;
            var settings = {
                'addClass': '',
                'beforeShow': '', 
                'afterShow': '',
                'hPos': 'center', 
                'vPos': 'center',
                'indicatorZIndex' : 5001, 
                'overlayZIndex': 5000, 
                'parent': '',
                'marginTop': 0,
                'marginLeft': 0,
                'overlayWidth': null,
                'overlayHeight': null
            };

        jQuery.extend(settings, options);

            var loadingDiv = jQuery('<div></div>');
        var overlayDiv = jQuery('<div></div>');

        //
        // Set up ID and classes
        //
        if ( settings.indicatorID ) {
            indicatorID = settings.indicatorID;
        }
        else {
            indicatorID = jQuery(this).attr('id');
        }

        jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID );
        jQuery(loadingDiv).addClass('loading-indicator');

        if ( settings.addClass ){
            jQuery(loadingDiv).addClass(settings.addClass);
        }



        //
        // Create the overlay
        //
        jQuery(overlayDiv).css('display', 'none');

        // Append to body, otherwise position() doesn't work on Webkit-based browsers
        jQuery(document.body).append(overlayDiv);

        //
        // Set overlay classes
        //
        jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay');

        jQuery(overlayDiv).addClass('loading-indicator-overlay');

        if ( settings.addClass ){
            jQuery(overlayDiv).addClass(settings.addClass + '-overlay');
        }

        //
        // Set overlay position
        //

        var overlay_width;
        var overlay_height;

        var border_top_width = jQuery(this).css('border-top-width');
        var border_left_width = jQuery(this).css('border-left-width');

        //
        // IE will return values like 'medium' as the default border, 
        // but we need a number
        //
        border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width;
        border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width;

        var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);
        var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width);

        if ( settings.overlayWidth !== null ) {
            overlay_width = settings.overlayWidth;
        }
        else {
            overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css('padding-right')) + parseInt(jQuery(this).css('padding-left'));
        }

        if ( settings.overlayHeight !== null ) {
            overlay_height = settings.overlayWidth;
        }
        else {
            overlay_height = parseInt(jQuery(this).height()) + parseInt(jQuery(this).css('padding-top')) + parseInt(jQuery(this).css('padding-bottom'));
        }


        jQuery(overlayDiv).css('width', overlay_width.toString() + 'px');
        jQuery(overlayDiv).css('height', overlay_height.toString() + 'px');

        jQuery(overlayDiv).css('left', overlay_left_pos.toString() + 'px');
        jQuery(overlayDiv).css('position', 'absolute');

        jQuery(overlayDiv).css('top', overlay_top_pos.toString() + 'px' );
        jQuery(overlayDiv).css('z-index', settings.overlayZIndex);

        //
        // Set any custom overlay CSS       
        //
            if ( settings.overlayCSS ) {
                jQuery(overlayDiv).css ( settings.overlayCSS );
            }


        //
        // We have to append the element to the body first
        // or .width() won't work in Webkit-based browsers (e.g. Chrome, Safari)
        //
        jQuery(loadingDiv).css('display', 'none');
        jQuery(document.body).append(loadingDiv);

        jQuery(loadingDiv).css('position', 'absolute');
        jQuery(loadingDiv).css('z-index', settings.indicatorZIndex);

        //
        // Set top margin
        //

        var indicatorTop = overlay_top_pos;

        if ( settings.marginTop ) {
            indicatorTop += parseInt(settings.marginTop);
        }

        var indicatorLeft = overlay_left_pos;

        if ( settings.marginLeft ) {
            indicatorLeft += parseInt(settings.marginTop);
        }


        //
        // set horizontal position
        //
        if ( settings.hPos.toString().toLowerCase() == 'center' ) {
            jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString()  + 'px');
        }
        else if ( settings.hPos.toString().toLowerCase() == 'left' ) {
            jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(jQuery(overlayDiv).css('margin-left'))).toString() + 'px');
        }
        else if ( settings.hPos.toString().toLowerCase() == 'right' ) {
            jQuery(loadingDiv).css('left', (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString()  + 'px');
        }
        else {
            jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(settings.hPos)).toString() + 'px');
        }       

        //
        // set vertical position
        //
        if ( settings.vPos.toString().toLowerCase() == 'center' ) {
            jQuery(loadingDiv).css('top', (indicatorTop + ((jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString()  + 'px');
        }
        else if ( settings.vPos.toString().toLowerCase() == 'top' ) {
            jQuery(loadingDiv).css('top', indicatorTop.toString() + 'px');
        }
        else if ( settings.vPos.toString().toLowerCase() == 'bottom' ) {
            jQuery(loadingDiv).css('top', (indicatorTop + (jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height()))).toString()  + 'px');
        }
        else {
            jQuery(loadingDiv).css('top', (indicatorTop + parseInt(settings.vPos)).toString() + 'px' );
        }       




        //
        // Set any custom css for loading indicator
        //
            if ( settings.css ) {
                jQuery(loadingDiv).css ( settings.css );
            }


        //
        // Set up callback options
        //
        var callback_options = 
            {
                'overlay': overlayDiv,
                'indicator': loadingDiv,
                'element': this
            };

        //
        // beforeShow callback
        //
        if ( typeof(settings.beforeShow) == 'function' ) {
            settings.beforeShow( callback_options );
        }

        //
        // Show the overlay
        //
        jQuery(overlayDiv).show();

        //
        // Show the loading indicator
        //
        jQuery(loadingDiv).show();

        //
        // afterShow callback
        //
        if ( typeof(settings.afterShow) == 'function' ) {
            settings.afterShow( callback_options );
        }

        return this;
         };


    jQuery.fn.hideLoading = function(options) {


            var settings = {};

            jQuery.extend(settings, options);

        if ( settings.indicatorID ) {
            indicatorID = settings.indicatorID;
        }
        else {
            indicatorID = jQuery(this).attr('id');
        }

        jQuery(document.body).find('#loading-indicator-' + indicatorID ).remove();
        jQuery(document.body).find('#loading-indicator-' + indicatorID + '-overlay' ).remove();

        return this;
        };

在html文件中我使用了以下脚本..

<script type="text/javascript">
$(document).ready(
            function()
            {
                jQuery('#activity_pane').showLoading(
                    {
                        'afterShow': 
                        function() 
                        {
                            setTimeout( "jQuery('#activity_pane').hideLoading()", 3000 );
                        }
                    }
                );
            }
        ); 

</script>

我的div标签如下..

<div id="activity_pane">
    Here is where we will load something via ajax.
    <br />
    This container <b>must</b> have an id attribute
</div>

但我收到的错误如下......

TypeError: jQuery(...).showLoading is not a function
function()

请帮我解决这个问题。提前谢谢。

Answer 1

首先要做的事情。

在页面上加载整个内容后会触发以下事件：

$(document).ready()

那么，为什么你会在这个事件上附加一个加载窗口，因为它应该在页面被加载时显示出来？

检查插件网站，给出的示例是将其附加到click事件，因此在执行AJAX调用时将弹出加载窗口。除非你的整个页面是从点击事件开始的AJAX调用加载的，否则我很确定他们的例子不适合你的想法。

为什么jQuery加载器不工作？

1 个答案: