摘要:最近做的一个项目是客户端里面包了页面,客户端向后台发送请求有可能费时较长,因此需要在服务器响应期间在页面实现动态加载效果。为了实现加载效果必须将同步请求改成异步的。
最近做的一个项目是C#客户端里面包了html页面,客户端向后台发送请求有可能费时较长,因此需要在服务器响应期间在页面实现动态加载效果。
最开始基于安全考虑所有的前端请求都是走C#同步请求,这就带来两个问题
1.同步请求用时较长,导致页面出现假死状态,请求回来之前页面渲染被阻塞
2.同步没办法使用加载效果,原因是浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线 程阻塞,不给它执行的时间。在同步请求前后showLoading/hideLoading都没办法起作用。
为了实现加载效果必须将同步请求改成异步的。
官方网站:http://spin.js.org/
使用方法
第一步:引入js包
第二步:需要在页面定义一个菊花加载的背景,一般是个正方形的div作为target
#loadingBox { margin:40px auto 5px; width:300px; height:300px; border-style: solid; border-width: 1px; border-color: #DF7401; background: #EFF5FB; text-align: center; line-height: 300px; color:#2E2EFE; }
第三步:自定义花瓣的数量大小旋转速度等参数
var opts = { //innerImage: {url: "../img/logo.png", width: 56, height: 56 }, //内部图片 lines: 13, // 花瓣数目 length: 20, // 花瓣长度 width: 10, // 花瓣宽度 radius: 30, // 花瓣距中心半径 corners: 1, // 花瓣圆滑度 (0-1) rotate: 0, // 花瓣旋转角度 direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针 color: "#5882FA", // 花瓣颜色 speed: 1, // 花瓣旋转速度 trail: 60, // 花瓣旋转时的拖影(百分比) shadow: false, // 花瓣是否显示阴影 hwaccel: false, //spinner 是否启用硬件加速及高速旋转 className: "spinner", // spinner css 样式名称 zIndex: 2e9, // spinner的z轴 (默认是2000000000) top: "auto", // spinner 相对父容器Top定位 单位 px left: "auto", // spinner 相对父容器Left定位 单位 px position: "relative", // element position progress: true, // show progress tracker progressTop: 0, // offset top for progress tracker progressLeft: 0 // offset left for progress tracker };
然后启动加载效果
var spinner = new Spinner(opts); var target = document.getElementById("loadingBox"); spinner.spin(target);
停止加载
spinner.spin();
完。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/84301.html
摘要:清楚自己想要什么样的组件,就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间,窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。 副标题----为什么我要写这个 react 插件 图片懒加载是项目中常用的功能,然而现有 react 懒加载组件库,用着都不是很爽了 ?。概括一下有如下几点: 没有只针对 image 懒加载组件。多...
摘要:清楚自己想要什么样的组件,就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间,窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。 副标题----为什么我要写这个 react 插件 图片懒加载是项目中常用的功能,然而现有 react 懒加载组件库,用着都不是很爽了 ?。概括一下有如下几点: 没有只针对 image 懒加载组件。多...
摘要:清楚自己想要什么样的组件,就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间,窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。 副标题----为什么我要写这个 react 插件 图片懒加载是项目中常用的功能,然而现有 react 懒加载组件库,用着都不是很爽了 ?。概括一下有如下几点: 没有只针对 image 懒加载组件。多...
阅读 3286·2021-11-22 12:04
阅读 2679·2019-08-29 13:49
阅读 452·2019-08-26 13:45
阅读 2190·2019-08-26 11:56
阅读 968·2019-08-26 11:43
阅读 554·2019-08-26 10:45
阅读 1244·2019-08-23 16:48
阅读 2115·2019-08-23 16:07