模态框缓冲效果实现

客官°小女子只卖身不卖艺 2022-07-13 00:45 167阅读 0赞

项目模态框是通过ajax异步来获得数据的，这就造成一个问题，当请求过多或数据量太大，数据展现的不是很及时，用户体验不是很好。于是想到通过缓冲效果来增强用户体验。

## 步骤： ##

1.  jquery的ajaxStart(callback) 方法 及ajaxStop(callback)  
    通过这两个方法判断ajax异步请求是否结束。
2.  通过Spin.js 实现缓冲效果。

## 简介： ##

ajaxStart(callback) AJAX 请求开始时执行方法。

示例
             $("#loading").ajaxStart(function(){ 
               $(this).show();
             });

ajaxStop AJAX 请求结束时执行方法。
            ``` 示例 $("#loading").ajaxStop(function(){ $(this).hide(); });

注：在jquery1.8以上 执行上面方法需要加 $(document) 即：

$(document).ajaxStart(function(){
       ...};

spin.js
         http://www.cnblogs.com/lxblog/p/3425599.html

## 过程： ##

导入js

<script src="statics/js/jquery-2.1.4.min.js" type="text/javascript" ></script> 
    <script src="statics/js/spin.js" type="text/javascript" ></script>
    
        <script type="text/javascript"> //定义花瓣样式 var opts = { lines: 13, // 花瓣数目 length: 15, // 花瓣长度 width: 10, // 花瓣宽度 radius: 20, // 花瓣距中心半径 corners: 1, // 花瓣圆滑度 (0-1) rotate: 0, // 花瓣旋转角度 direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针 color: '#5882FA', // 花瓣颜色 speed: 1, // 花瓣旋转速度 trail: 60, // 花瓣旋转时的拖影(百分比) shadow: true, // 花瓣是否显示阴影 hwaccel: false, //spinner 是否启用硬件加速及高速旋转 className: 'spinner', // spinner css 样式名称 zIndex: 2e9, // spinner的z轴 (默认是2000000000) top: '50%', // spinner 相对父容器Top定位 单位 px left: '50%'// spinner 相对父容器Left定位 单位 px }; var spinner = new Spinner(opts); //当点击模态框时执行的方法。 function showFlower(){ // ajax开始执行 $(document).ajaxStart(function(){ var target = $("#panel-body").get(0); //panel-body为我右侧页面div的id.我的页面布局为左侧菜单栏右侧主体内容。 spinner.spin(target);//打开缓冲效果 }); // ajax结束执行 $(document).ajaxStop(function(){ spinner.spin(); //隐藏缓冲效果 }); . . . 其他方法体 } </script>

如果您有更好的方法也欢迎提出来

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML 模态框

HTML 模态框复制粘贴就能用 <!DOCTYPE html> <html> <head> <meta charset="ut

妖狐艹你老母/ 2022年10月29日 10:26/ 0 赞/ 225 阅读

相关用vue实现模态框组件

基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实

系统管理员/ 2022年09月26日 11:55/ 0 赞/ 186 阅读

相关 bootstrap 模态框

我们需要引入bootstrap.min.js 先创建模态框的触发装置： <button class="btn btn-primary btn-lg" data-to

你的名字/ 2022年08月01日 02:50/ 0 赞/ 366 阅读

相关模态框缓冲效果实现

项目模态框是通过ajax异步来获得数据的，这就造成一个问题，当请求过多或数据量太大，数据展现的不是很及时，用户体验不是很好。于是想到通过缓冲效果来增强用户体验。步骤：

客官°小女子只卖身不卖艺/ 2022年07月13日 00:45/ 0 赞/ 168 阅读

相关模态框

点击按钮弹出模态框的实现： html： <!DOCTYPE html> <html> <head> <meta charset="u

淡淡的烟草味﹌/ 2022年05月14日 14:24/ 0 赞/ 289 阅读

相关 bootstrap--模态框

复制即可运行. 小模态框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

╰半橙微兮°/ 2022年02月21日 07:47/ 0 赞/ 444 阅读

相关 bootstrap模态框-单击模态框之外不关闭

在模态框标签添加如下标签：data-backdrop="static" data-keyboard="false"  <div cl

系统管理员/ 2022年02月03日 12:17/ 0 赞/ 431 阅读

相关模态框

模态框模态框，又是一种全新的异空间页面，本篇介绍的模态框开启后，除了窗体、框体之外的内容都被遮住了，点击不了，只能关闭后，其他之前的才能操作。 ![在这里插

爱被打了一巴掌/ 2022年01月26日 11:27/ 0 赞/ 403 阅读

相关 Revit 模态框

非模态窗口有一个好处，就是可以一直停留在程序之前，然后持续完成操作。但是在Revit二次开发中，非模态窗口也有几个注意事项。 1、需要在文档关闭的时候，把非模态窗口也关闭掉，

约定不等于承诺〃/ 2022年01月06日 20:29/ 0 赞/ 351 阅读

相关 bootstrap 嵌套模态框二级模态框关闭导致一级模态框滚动条消失

一.问题描述实际开发中遇到bootstrap嵌套模态框，关闭次模态框后主模态框滚动条消失。二.解决办法在主模态框上加属性：（先凑合着用，回头再看看源码）

快来打我*/ 2021年06月24日 14:36/ 0 赞/ 584 阅读