为什么jQuery加载程序不工作？

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() 

那么，你为什么会附加一个加载窗口，因为它本来是要显示该事件，而该页面被加载？

检查插件网站，给出的例子是将它附加到一个单击事件，所以加载窗口将在AJAX调用执行时弹出。 除非您的整个页面是从点击事件启动的AJAX调用加载的，否则我很确定他们的示例不适合您的想法。