loading插件

最新推荐文章于 2021-12-22 14:34:05 发布

罗汉松驻扎的工作基地

最新推荐文章于 2021-12-22 14:34:05 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/MFCdestoryer/article/details/41681601

本文介绍了一个简单易用的loading插件iOS-Overlay，该插件可在AJAX请求时显示加载动画，提升用户体验。文章详细展示了如何引入JS和CSS文件，并通过一个示例演示了如何在按钮点击事件中调用插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里介绍一个简单易用的loading插件
官网：https://github.com/taitems/iOS-Overlay
如图，大概是这个样子的
图1

这个插件的作用最主要的就是在取ajax时需要等待，
这个时候显示一个转转转的东西吸引一下操作人，
让他等得耐烦一点点

首先引入js和css
如图2

一个简单的例子，如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="isoLoadingTest1.WebForm1" %>

<!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">
<head runat="server">
<title></title>

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>


<script src="js/iosOverlay.js" type="text/javascript"></script>
<script src="js/spin.min.js" type="text/javascript"></script>
<link href="css/iosOverlay.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">

$(function () {

$("#myBtn").click(function () {

$.ajax({
type: "POST",
url: "Handler1.ashx",
data: "",
beforeSend: function () {
var opts = {
lines: 13,
length: 11,
width: 5,
radius: 12,
corners: 1,
rotate: 0,
color: '#FFF',
speed: 1,
trail: 60,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: '150',
left: 'auto'
};
var target = document.createElement("div");
document.body.appendChild(target);
var spinner = new Spinner(opts).spin(target);
overLay = iosOverlay({
text: '读取数据中...',
duration: 30000,
spinner: spinner
});
}, //end beforeSend
success: function (responseData) {
},//end success
complete: function () {
overLay.hide();
}//end complete
});//end ajax

})//end click

})//end document.ready

</script>

</head>
<body>
<div>

<input type="button" id='myBtn' value='clcik' />

</div>
</body>
</html>

总结：最重要的就是在 beforSend和comple事件中加上插件的东西

另外我还想说一下：这个loading js 和百度的eChart js是有重命名冲突的，

请将echart js在最后调用，

不要在loading js前面调用，注意顺序