jQuery实现Loading

最新推荐文章于 2022-07-10 17:26:01 发布
最新推荐文章于 2022-07-10 17:26:01 发布
阅读量273 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/syc2013/blog/140394
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1 目的：使用jQuery实现的处理结果出现前的加载效果

2 目录结构：

目录结构展示

3 images中的两张图片：

(1)loading.gif

loading.gif图片

(2)loading-bars.gif

loading-bars.gif图片

4代码展示：

(1)showLoading.html内容如下：

<!-- lang: html -->
<!DOCTYPE HTML>
<!-- lang: html -->
<html>
<!-- lang: html -->
    <head>
<!-- lang: html -->
            <title>jQuery showLoading example</title>
<!-- lang: html -->
            <meta charset="utf-8">
<!-- lang: html -->
            <link href="showLoading.css" rel="stylesheet" media="screen" />
<!-- lang: html -->
            <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<!-- lang: html -->
            <script type="text/javascript" src="jquery.showLoading.js"></script>
<!-- lang: html -->
            <style>
<!-- lang: html -->
                    a{
<!-- lang: html -->
                        color:blue;
<!-- lang: html -->
                        cursor:pointer;
<!-- lang: html -->
                        text-decoration:underline;
<!-- lang: html -->
                    }
<!-- lang: html -->
                    
<!-- lang: html -->
                    div.instructions_container{
<!-- lang: html -->
                        float:left;
<!-- lang: html -->
                        width:350px;
<!-- lang: html -->
                        margin-right:50px;
<!-- lang: html -->
                    }
<!-- lang: html -->

<!-- lang: html -->
                    div#activity_pane{
<!-- lang: html -->
                        float:left;
<!-- lang: html -->
                        width:350px;
<!-- lang: html -->
                        height:200px;
<!-- lang: html -->
                        border:1px solid #CCCCCC;
<!-- lang: html -->
                        background-color:#EEEEEE;
<!-- lang: html -->
                        padding-top:200px;
<!-- lang: html -->
                        text-align:center;
<!-- lang: html -->
                    }
<!-- lang: html -->

<!-- lang: html -->
                    div.exmple_links .link_category{
<!-- lang: html -->
                        margin-bottom:15px;
<!-- lang: html -->
                    }
<!-- lang: html -->

<!-- lang: html -->
                    .loading-indicator-bars{
<!-- lang: html -->
                        background-image:url('images/loading-bars.gif');
<!-- lang: html -->
                        width:150px;
<!-- lang: html -->
                    }
<!-- lang: html -->
            </style>
<!-- lang: html -->
            <script type="text/javascript">
<!-- lang: html -->
                jQuery(document).ready(function(){
<!-- lang: html -->
                    //
<!-- lang: html -->
                    // When a user clicks the 'loading-default' link,
<!-- lang: html -->
                    // call showLoading on the activity pane
<!-- lang: html -->
                    // with default options
<!-- lang: html -->
                    //
<!-- lang: html -->
                    jQuery('a.loading-default').click(function(){
<!-- lang: html -->
                       jQuery('#activity_pane').showLoading(); 
<!-- lang: html -->
                    });
<!-- lang: html -->

<!-- lang: html -->
                    //
<!-- lang: html -->
                    //  When a user clicks the 'loading-ajax' link,
<!-- lang: html -->
                    //  call showLoading,sleep,then call hide loading
<!-- lang: html -->
                    //  with default options
<!-- lang: html -->
                    //
<!-- lang: html -->
                    jQuery('a.loading-ajax').click(function(){
<!-- lang: html -->
                        jQuery('#activity_pane').showLoading({
<!-- lang: html -->
                            'afterShow':
<!-- lang: html -->
                            function(){
<!-- lang: html -->
                                setTimeout("jQuery('#activity_pane').hideLoading()",1000);
<!-- lang: html -->
                            }
<!-- lang: html -->
                        });
<!-- lang: html -->
                    });
<!-- lang: html -->

<!-- lang: html -->
                    //
<!-- lang: html -->
                    // When a user clicks the 'loading-bars' link,
<!-- lang: html -->
                    //  call showLoading with addClass specified
<!-- lang: html -->
                    //
<!-- lang: html -->
                    jQuery('a.loading-bars').click(function(){
<!-- lang: html -->

<!-- lang: html -->
                       jQuery('#activity_pane').showLoading(
<!-- lang: html -->
                            {
<!-- lang: html -->
                                'addClass':'loading-indicator-bars'
<!-- lang: html -->
                            }
<!-- lang: html -->
                        );
<!-- lang: html -->
                     
<!-- lang: html -->
                    });
<!-- lang: html -->

<!-- lang: html -->
                    //
<!-- lang: html -->
                    // When a user clicks the 'loading-bars' link,
<!-- lang: html -->
                    //call hideLoading on the activity pane
<!-- lang: html -->
                    //
<!-- lang: html -->
                    jQuery('a.loading-hide').click(function(){
<!-- lang: html -->
                        jQuery('#activity_pane').hideLoading();
<!-- lang: html -->
                    });
<!-- lang: html -->

<!-- lang: html -->
                });
<!-- lang: html -->
            </script>
<!-- lang: html -->
    </head>
<!-- lang: html -->
    <body>
<!-- lang: html -->
        <div class="instructions_container">
<!-- lang: html -->
            <div class="example_links">
<!-- lang: html -->

<!-- lang: html -->
                <div class="link_category">
<!-- lang: html -->
                    <div class="link">
<!-- lang: html -->
                        <a class="loading-default">Show default loading indicator</a>
<!-- lang: html -->
                    </div>
<!-- lang: html -->
                     <div class="link">
<!-- lang: html -->
                        <a class="loading-hide">Hide default loading indicator</a>
<!-- lang: html -->
                     </div>
<!-- lang: html -->
                </div>
<!-- lang: html -->

<!-- lang: html -->
                <div class="link_category">
<!-- lang: html -->
                        <div class="link">
<!-- lang: html -->
                            <a class="loading-ajax">simulate 1-second Ajax load</a>
<!-- lang: html -->
                        </div>
<!-- lang: html -->
                </div>
<!-- lang: html -->

<!-- lang: html -->
                <div class="link_category">
<!-- lang: html -->
                        <div class="link">
<!-- lang: html -->
                                <a class="loading-bars">show 'bars'-style loading indicator</a>
<!-- lang: html -->
                        </div>
<!-- lang: html -->
                        <div class="link">
<!-- lang: html -->
                                <a class="loading-hide">Hide 'bars'-style loading indicator</a>
<!-- lang: html -->
                        </div>
<!-- lang: html -->

<!-- lang: html -->
                </div>                
<!-- lang: html -->

<!-- lang: html -->
            </div>
<!-- lang: html -->

<!-- lang: html -->
            <div class="usage">
<!-- lang: html -->
                Usage with jQuery load method:
<!-- lang: html -->
                <pre>
<!-- lang: html -->
 jQuey('#activity_pane').showLoading();
<!-- lang: html -->
 jQuery('#activity_pane').load(
<!-- lang: html -->
     '/path/to/my/url',
<!-- lang: html -->
    {},
<!-- lang: html -->
    function(){
<!-- lang: html -->
     //
<!-- lang: html -->
    // this is the ajax callback
<!-- lang: html -->
     //
<!-- lang: html -->
    jQuery('#activity_pane').hideLoading();
<!-- lang: html -->
 });
<!-- lang: html -->
                </pre>
<!-- lang: html -->
            </div>            
<!-- lang: html -->
        </div>
<!-- lang: html -->

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

<!-- lang: html -->
        <div style="clear:both;"></div>
<!-- lang: html -->
    </body>
<!-- lang: html -->
</html>

(2)showLoading.css内容展示：

<!-- lang: css -->
.loading-indicator{
<!-- lang: css -->
    height:80px;
<!-- lang: css -->
    width:80px;
<!-- lang: css -->
    background:url('images/loading.gif');
<!-- lang: css -->
    background-repeat: no-repeat;
<!-- lang: css -->
    background-position:center center;
<!-- lang: css -->
}
<!-- lang: css -->

<!-- lang: css -->
.loading-indicator-overlay{
<!-- lang: css -->
    background-color:#FFFFFF;
<!-- lang: css -->
    opacity:0.6;
<!-- lang: css -->
    filter:alpha(opacity = 60);
<!-- lang: css -->
}

(3)jquery.showLoading.js

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

<!-- lang: js -->
	jQuery.fn.showLoading = function(options) {
<!-- lang: js -->
		
<!-- lang: js -->
		var indicatorID;
<!-- lang: js -->
       		var settings = {
<!-- lang: js -->
       			'addClass': '',
<!-- lang: js -->
	       		'beforeShow': '', 
<!-- lang: js -->
       			'afterShow': '',
<!-- lang: js -->
       			'hPos': 'center', 
<!-- lang: js -->
	       		'vPos': 'center',
<!-- lang: js -->
       			'indicatorZIndex' : 5001, 
<!-- lang: js -->
       			'overlayZIndex': 5000, 
<!-- lang: js -->
	       		'parent': '',
<!-- lang: js -->
       			'marginTop': 0,
<!-- lang: js -->
       			'marginLeft': 0,
<!-- lang: js -->
	       		'overlayWidth': null,
<!-- lang: js -->
       			'overlayHeight': null
<!-- lang: js -->
	       	};
<!-- lang: js -->

<!-- lang: js -->
		jQuery.extend(settings, options);
<!-- lang: js -->
       	
<!-- lang: js -->
       		var loadingDiv = jQuery('<div></div>');
<!-- lang: js -->
		var overlayDiv = jQuery('<div></div>');
<!-- lang: js -->

<!-- lang: js -->
		//
<!-- lang: js -->
		// Set up ID and classes
<!-- lang: js -->
		//
<!-- lang: js -->
		if ( settings.indicatorID ) {
<!-- lang: js -->
			indicatorID = settings.indicatorID;
<!-- lang: js -->
		}
<!-- lang: js -->
		else {
<!-- lang: js -->
			indicatorID = jQuery(this).attr('id');
<!-- lang: js -->
		}
<!-- lang: js -->
			
<!-- lang: js -->
		jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID );
<!-- lang: js -->
		jQuery(loadingDiv).addClass('loading-indicator');
<!-- lang: js -->
		
<!-- lang: js -->
		if ( settings.addClass ){
<!-- lang: js -->
			jQuery(loadingDiv).addClass(settings.addClass);
<!-- lang: js -->
		}
<!-- lang: js -->

<!-- lang: js -->

<!-- lang: js -->
		
<!-- lang: js -->
		//
<!-- lang: js -->
		// Create the overlay
<!-- lang: js -->
		//
<!-- lang: js -->
		jQuery(overlayDiv).css('display', 'none');
<!-- lang: js -->
		
<!-- lang: js -->
		// Append to body, otherwise position() doesn't work on Webkit-based browsers
<!-- lang: js -->
		jQuery(document.body).append(overlayDiv);
<!-- lang: js -->
		
<!-- lang: js -->
		//
<!-- lang: js -->
		// Set overlay classes
<!-- lang: js -->
		//
<!-- lang: js -->
		jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay');
<!-- lang: js -->
		
<!-- lang: js -->
		jQuery(overlayDiv).addClass('loading-indicator-overlay');
<!-- lang: js -->
		
<!-- lang: js -->
		if ( settings.addClass ){
<!-- lang: js -->
			jQuery(overlayDiv).addClass(settings.addClass + '-overlay');
<!-- lang: js -->
		}
<!-- lang: js -->
		
<!-- lang: js -->
		//
<!-- lang: js -->
		// Set overlay position
<!-- lang: js -->
		//
<!-- lang: js -->
		
<!-- lang: js -->
		var overlay_width;
<!-- lang: js -->
		var overlay_height;
<!-- lang: js -->
		
<!-- lang: js -->
		var border_top_width = jQuery(this).css('border-top-width');
<!-- lang: js -->
		var border_left_width = jQuery(this).css('border-left-width');
<!-- lang: js -->
		
<!-- lang: js -->
		//
<!-- lang: js -->
		// IE will return values like 'medium' as the default border, 
<!-- lang: js -->
		// but we need a number
<!-- lang: js -->
		//
<!-- lang: js -->
		border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width;
<!-- lang: js -->
		border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width;
<!-- lang: js -->
		
<!-- lang: js -->
		var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);
<!-- lang: js -->
		var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width);
<!-- lang: js -->
		
<!-- lang: js -->
		if ( settings.overlayWidth !== null ) {
<!-- lang: js -->
			overlay_width = settings.overlayWidth;
<!-- lang: js -->
		}
<!-- lang: js -->
		else {
<!-- lang: js -->
			overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css('padding-right')) + parseInt(jQuery(this).css('padding-left'));
<!-- lang: js -->
		}
<!-- lang: js -->

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

<!-- lang: js -->

<!-- lang: js -->
		jQuery(overlayDiv).css('width', overlay_width.toString() + 'px');
<!-- lang: js -->
		jQuery(overlayDiv).css('height', overlay_height.toString() + 'px');
<!-- lang: js -->

<!-- lang: js -->
		jQuery(overlayDiv).css('left', overlay_left_pos.toString() + 'px');
<!-- lang: js -->
		jQuery(overlayDiv).css('position', 'absolute');
<!-- lang: js -->

<!-- lang: js -->
		jQuery(overlayDiv).css('top', overlay_top_pos.toString() + 'px' );
<!-- lang: js -->
		jQuery(overlayDiv).css('z-index', settings.overlayZIndex);
<!-- lang: js -->

<!-- lang: js -->
		//
<!-- lang: js -->
		// Set any custom overlay CSS		
<!-- lang: js -->
		//
<!-- lang: js -->
       		if ( settings.overlayCSS ) {
<!-- lang: js -->
       			jQuery(overlayDiv).css ( settings.overlayCSS );
<!-- lang: js -->
       		}
<!-- lang: js -->

<!-- lang: js -->

<!-- lang: js -->
		//
<!-- lang: js -->
		// We have to append the element to the body first
<!-- lang: js -->
		// or .width() won't work in Webkit-based browsers (e.g. Chrome, Safari)
<!-- lang: js -->
		//
<!-- lang: js -->
		jQuery(loadingDiv).css('display', 'none');
<!-- lang: js -->
		jQuery(document.body).append(loadingDiv);
<!-- lang: js -->
		
<!-- lang: js -->
		jQuery(loadingDiv).css('position', 'absolute');
<!-- lang: js -->
		jQuery(loadingDiv).css('z-index', settings.indicatorZIndex);
<!-- lang: js -->

<!-- lang: js -->
		//
<!-- lang: js -->
		// Set top margin
<!-- lang: js -->
		//
<!-- lang: js -->

<!-- lang: js -->
		var indicatorTop = overlay_top_pos;
<!-- lang: js -->
		
<!-- lang: js -->
		if ( settings.marginTop ) {
<!-- lang: js -->
			indicatorTop += parseInt(settings.marginTop);
<!-- lang: js -->
		}
<!-- lang: js -->
		
<!-- lang: js -->
		var indicatorLeft = overlay_left_pos;
<!-- lang: js -->
		
<!-- lang: js -->
		if ( settings.marginLeft ) {
<!-- lang: js -->
			indicatorLeft += parseInt(settings.marginTop);
<!-- lang: js -->
		}
<!-- lang: js -->
		
<!-- lang: js -->
		
<!-- lang: js -->
		//
<!-- lang: js -->
		// set horizontal position
<!-- lang: js -->
		//
<!-- lang: js -->
		if ( settings.hPos.toString().toLowerCase() == 'center' ) {
<!-- lang: js -->
			jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString()  + 'px');
<!-- lang: js -->
		}
<!-- lang: js -->
		else if ( settings.hPos.toString().toLowerCase() == 'left' ) {
<!-- lang: js -->
			jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(jQuery(overlayDiv).css('margin-left'))).toString() + 'px');
<!-- lang: js -->
		}
<!-- lang: js -->
		else if ( settings.hPos.toString().toLowerCase() == 'right' ) {
<!-- lang: js -->
			jQuery(loadingDiv).css('left', (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString()  + 'px');
<!-- lang: js -->
		}
<!-- lang: js -->
		else {
<!-- lang: js -->
			jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(settings.hPos)).toString() + 'px');
<!-- lang: js -->
		}		
<!-- lang: js -->

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

<!-- lang: js -->

<!-- lang: js -->
		 
<!-- lang: js -->
		
<!-- lang: js -->
		//
<!-- lang: js -->
		// Set any custom css for loading indicator
<!-- lang: js -->
		//
<!-- lang: js -->
       		if ( settings.css ) {
<!-- lang: js -->
       			jQuery(loadingDiv).css ( settings.css );
<!-- lang: js -->
       		}
<!-- lang: js -->

<!-- lang: js -->
		
<!-- lang: js -->
		//
<!-- lang: js -->
		// Set up callback options
<!-- lang: js -->
		//
<!-- lang: js -->
		var callback_options = 
<!-- lang: js -->
			{
<!-- lang: js -->
				'overlay': overlayDiv,
<!-- lang: js -->
				'indicator': loadingDiv,
<!-- lang: js -->
				'element': this
<!-- lang: js -->
			};
<!-- lang: js -->
	
<!-- lang: js -->
		//
<!-- lang: js -->
		// beforeShow callback
<!-- lang: js -->
		//
<!-- lang: js -->
		if ( typeof(settings.beforeShow) == 'function' ) {
<!-- lang: js -->
			settings.beforeShow( callback_options );
<!-- lang: js -->
		}
<!-- lang: js -->
		
<!-- lang: js -->
		//
<!-- lang: js -->
		// Show the overlay
<!-- lang: js -->
		//
<!-- lang: js -->
		jQuery(overlayDiv).show();
<!-- lang: js -->
		
<!-- lang: js -->
		//
<!-- lang: js -->
		// Show the loading indicator
<!-- lang: js -->
		//
<!-- lang: js -->
		jQuery(loadingDiv).show();
<!-- lang: js -->

<!-- lang: js -->
		//
<!-- lang: js -->
		// afterShow callback
<!-- lang: js -->
		//
<!-- lang: js -->
		if ( typeof(settings.afterShow) == 'function' ) {
<!-- lang: js -->
			settings.afterShow( callback_options );
<!-- lang: js -->
		}
<!-- lang: js -->

<!-- lang: js -->
		return this;
<!-- lang: js -->
    	 };
<!-- lang: js -->

<!-- lang: js -->

<!-- lang: js -->
	jQuery.fn.hideLoading = function(options) {
<!-- lang: js -->
		
<!-- lang: js -->
		
<!-- lang: js -->
       		var settings = {};
<!-- lang: js -->
	
<!-- lang: js -->
       		jQuery.extend(settings, options);
<!-- lang: js -->

<!-- lang: js -->
		if ( settings.indicatorID ) {
<!-- lang: js -->
			indicatorID = settings.indicatorID;
<!-- lang: js -->
		}
<!-- lang: js -->
		else {
<!-- lang: js -->
			indicatorID = jQuery(this).attr('id');
<!-- lang: js -->
		}
<!-- lang: js -->
       	
<!-- lang: js -->
   		jQuery(document.body).find('#loading-indicator-' + indicatorID ).remove();
<!-- lang: js -->
		jQuery(document.body).find('#loading-indicator-' + indicatorID + '-overlay' ).remove();
<!-- lang: js -->
		
<!-- lang: js -->
		return this;
<!-- lang: js -->
     	};

转载于:https://my.oschina.net/syc2013/blog/140394

weixin_33915554
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery页面加载方法
小灯博客
10-17 1046
第一种方法： $(function(){ alert("hello"); });文档加载完后执行函数（这里的文档树不等于全部文件） 第二种写法： $(document).ready(function(){ alert("hello"); });文档树加载完后执行函数 第三种写法： (function($){ alert("hello"); })(jQuery);函数执行完后加
JQuery 实现页面 loading 效果
group401的博客
04-17 1662
当页面正在加载时页面效果如下图： 当加载完成时，loading 图片和文字“页面正在加载中，请稍后......“将会消失。代码如下： loading     $(document).ready(function(){       $(window).load(function(){         $("img").hide("");         $("p"
jquery loading（遮罩）插件
07-20
jQuery Loading插件用于当DOM元素加载或变化期间，对其进行遮挡阻止用户操作并告知有些后台任务还在进行。实现“正在加载中…”的效果。整个插件只有1kb左右。效果跟extjs遮罩（锁屏）效果基本一样。
基于jquery实现页面loading加载效果
m0_57217156的博客
04-02 4029
1.css样式 代码如下（示例）： <style type="text/css"> .background { display: block; width: 100%; height: 100%; opacity: 0.4; filter: alpha(opacity=40); background:while; position: absolute; top: 0; left: 0; z-
jquery实现页面等待加载“转圈”效果
weixin_40362806的博客
06-28 1983
jquery点击提交的 预转圈
初试jquery制作一个简单的loading
weixin_33749242的博客
09-22 313
很多人都为javascript而感到困惑，写个效果太复杂了，有了jquery后，我们就能够很简单的写一些很漂亮的效果。而这次我要说的不是这个，是jquery对ajax的支持，下面先简单说一下jquery对ajax的一些函数 通用方式： $.ajax(prop) 通过一个ajax请求，回去远程数据，prop是一个hash表，它可以传递的key/value有以下几种。 ...
jquery 加载显示loading图标_【JS】322 手把手教你实现前端惰性加载
weixin_39769187的博客
11-22 514
本文由chunpengliu从需求出发：在实际的项目开发中，我遇到了一个这样的需求：一个页面模块有很多列表数据展示，每条数据都带有图片，而首次展示的图片只需要不到10张，那么我们还要一次性把所有图片都加载出来吗？显然这是不对的，不仅影响页面渲染速度，还浪费带宽(因为需要对列表进行拖动排序，需加载出全部列表，不能做分页)。我们可以在浏览器滚动到一定的位置的时候进行下载，这也就是们通常所说...
jquery loading 图片
12-27
二、jQuery Loading图片的实现方法 1. CSS方法：利用CSS创建一个加载动画，例如旋转的gif图片或纯CSS3的动画。通过jQuery控制CSS类的添加和移除，来显示或隐藏这个加载动画。 ```javascript $(document).ready...
jQuery Loading页面加载动画效果特效代码
03-20
以上就是使用jQuery实现Loading页面加载动画效果的基本步骤。通过灵活运用jQuery提供的工具，可以创建出各种各样的加载动画，以满足不同项目的需要。在实际应用中，可能还需要考虑浏览器兼容性、性能优化等问题，...
一个适合做页面 “加载中” 效果的插件 jquery-loading
10-26
"jquery-loading"是一个专为实现这种效果设计的jQuery插件，它提供了一种简单而实用的方式来显示页面加载的状态，避免用户在等待过程中感到不耐烦。 首先，我们来了解一下jQuery。jQuery是一个快速、简洁的...
Jquery遮罩ShowLoading组件
07-18
在开发中有时请求AJAX请求，加载服务器返回来的数据，此时不想页面被用户乱点击，导致逻辑错乱，就需要进行遮罩，加载完数据，在消除遮罩
jQuery.spin.js自定义页面加载Loading动画代码
11-24
jQuery.spin.js自定义页面加载Loading动画代码
jQuery Loading页面加载动画效果代码.zip
07-04
jQuery Loading页面加载动画效果代码是一款读取进度条的特效代码
jquery实现网页图片等待延时加载Loading插件源码.zip
11-08
在"jquery实现网页图片等待延时加载Loading插件源码.zip"中，我们可以预见到包含了一个使用jQuery编写的图片延迟加载插件。这个插件可能包含了以下关键知识点： 1. **jQuery选择器**：jQuery选择器是用于选取DOM...
jquery-loading-master.zip
11-15
本资源"jquery-loading-master.zip"正是基于jQuery开发的一款页面加载效果插件，它可以帮助我们轻松实现各种动态的加载动画，为用户提供更优质的等待体验。 首先，我们要理解jQuery的核心概念。jQuery是一个轻量级...
jquery 加载显示loading图标_从 loading 的 9 种写法谈 React 业务开发
weixin_39644139的博客
11-26 515
前言这是一篇比较全面讲解 React 的文章，里面很多基础知识希望你自己一边查阅资料一边学习。全文从业务开发中最常用见 loading 效果不同是实现讲起，说下现在前端开发在业务上应该有的思考。入门级操作StateState：https://reactjs.org/docs/state-and-lifecycle.html最简单的实现，我们在 Loading 组件内部声明一个状态，通过代...
jquery 实现loading
weixin_34018169的博客
09-05 270
   通常function 的方法名称大写 代表时构造函数。需要通过new 关键字调用。   function ShowLoading(opt) { //默认配置项 var _default = { "target": "body", //需要展示的遮罩的目标 "cssName": "_showloading", //class名称...
jquery 实现简单loading 效果
weixin_30898109的博客
07-10 1100
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <hea...
jquery实现文件上传及loading加载效果
weixin_52065872的博客
07-10 1337
1、定义UI结构 2、验证是否选择了文件 3、向formdata中追加文件 4、使用jQuery的Ajax发起上传文件的请求1.ajaxStart(callback) Ajax请求开始时，执行ajaxstart函数，可以在ajaxstart的callback中显示loading效果， 代码如下： 2.ajaxStop(callback) Ajax请求结束时，执行ajaxstop函数，可以在ajaxstop的callback中隐藏loading效果，...
jquery实现loading
最新发布
11-23
以下是使用jQuery实现loading效果的示例代码： ```html <!DOCTYPE html> <title>Loading Example /* 定义loading效果的样式 */ #loading { position: fixed; top: 0; left: 0; width: 100%; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值