网页加载缓慢时，两种方法实现loading效果

当页面加载速度很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）页面加载所需要时间越长，那么可能损失的用户量就会多。

第一种方法，可以在页面中放置一个GIF图片

</div>

当ajax获取数据成功时，在js中控制显示隐藏即可。

第二种方法，在页面中自定义一个loading 的样式（自己项目中为蓝色点点上下翻滚）

/*js中创建loading*/
function fnCreatLoading(){
   var _warp = $('<div class="wrapp_loading"></div>');
   $(_warp).html('<div class="k-line k-line11-1"></div>'
       +'<div class="k-line k-line11-2"></div>'
       +'<div class="k-line k-line11-3"></div>'
       +'<div class="k-line k-line11-4"></div>'
       +'<div class="k-line k-line11-5"></div>');
   $('body').append(_warp);
}

/*******************loading css样式****************/
.wrapp_loading {
position: fixed;
top: 50%;
left: 50%;
height: 100px;
margin: 0 10px 10px 0;
padding: 20px 20px 20px;
border-radius: 5px;
text-align: center;
}
.k-line {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 15px;
background: #01fef9;
/* background-color:#4b9cdb */
}
.k-line11-1 {
animation: k-loadingP 2s infinite;
}
.k-line11-2 {
animation: k-loadingP 2s infinite;
animation-delay: 0.15s;
}
.k-line11-3 {
animation: k-loadingP 2s infinite;
animation-delay: 0.3s;
}
.k-line11-4 {
animation: k-loadingP 2s infinite;
animation-delay: 0.45s;
}
.k-line11-5 {
animation: k-loadingP 2s infinite;
animation-delay: 0.6s;
}
@keyframes k-loadingP {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
/* Safari and Chrome */
-moz-transform: translateY(0);
/* Firefox */
-o-transform: translateY(0);
/* Opera */
}
35% {
transform: translateY(0);
-webkit-transform: translateY(0);
/* Safari and Chrome */
-moz-transform: translateY(0);
/* Firefox */
-o-transform: translateY(0);
/* Opera */
opacity: 0.3;
}
50% {
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
/* Safari and Chrome */
-moz-transform: translateY(-20px);
/* Firefox */
-o-transform: translateY(-20px);
/* Opera */
opacity: 0.8;
}
70% {
transform: translateY(3px);
-webkit-transform: translateY(3px);
/* Safari and Chrome */
-moz-transform: translateY(3px);
/* Firefox */
-o-transform: translateY(3px);
/* Opera */
opacity: 0.8;
}
85% {
transform: translateY(-3px);
-webkit-transform: translateY(-3px);
/* Safari and Chrome */
-moz-transform: translateY(-3px);
/* Firefox */
-o-transform: translateY(-3px);
/* Opera */
}
}

js 页面加载数据时，这样写：

function fnSearch(){
fnCreatLoading();
document.body.style.cursor = "wait";

searchjson.search=$(".iptsearch").val();
$.ajax({
url:'/movecheck/getCheckInfo',
data:searchjson,
type:'post',
success:function(dt){
$('#pagination').attr('data-isall',"");
$(document).find('.wrapp_loading').remove();
if(document.body.style.cursor === "wait"){
document.body.style.cursor = "default";
}
$('.js-rowall').prop('checked',false);
fnCreateTable(dt);
if(dt.data.length == 0){
$('.moveinnerTbody').html('');
var oTr = $('<tr></tr>');
oTr.html(`
<td colspan="7" class="">抱歉，没有查询到数据</td>
`);
$('.moveinnerTbody').append(oTr);
$('#pagination').html('');
}
},
error:function(dt){
createPrompt('error','抱歉，没有查询到数据!',true);
}
})
}

网页加载缓慢时，两种方法实现loading效果相关推荐

Opencv判断是否加载图片的两种方法
加载图片是图像处理最基本的操作,但有的时候我们加载图片会因为图片路径不正确或者没有图片等原因而报错,经常写代码的凭经验就知道是哪错了,但初学者一般是看不懂这些错误,就会很恼火了,如果加个判断语句就 ...
phpcms选择文件无法加载插件怎么办_win7浏览器显示无法加载插件的两种修复方法...
深度技术win7系统在使用浏览器观看视频,浏览网页的时候,显示无法加载插件,导致浏览器没办法正常使用,给操作带来一定的影响,怎么办?为什么浏览器会显示无法加载插件?针对此疑问,接下去小编给大家分享wi ...
网页加载缓慢、卡顿，但PING正常的问题记录
20210906更新在将宽带增加至三条后,因用户终端增加缘故,依然出现TCP丢包,PING正常的问题,原来的方法治标不治本,现在终于发现了根本原因和解决方法. 根本原因 DHCP服务(我的环境是3层 ...
jquery加载页面的几种方法(页面加载完成就执行)
1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).re ...
在网页加载完毕时，自动触发某个按钮的点击事件（HTML）
在网页加载完毕时自动触发某个按钮的点击事件需求: 在使用bootstrap 模态框时,需要模态框在网页加载完毕后,自动显示模态框,而不是通过按钮激活模态框. 解决思路: 在window.onload ...
在网页加载完毕时自动触发某个按钮的点击事件
在网页加载完毕时自动触发某个按钮的点击事件需求: 在使用bootstrap 模态框时需要模态框在网页加载完毕后自动显示模态框而不是通过按钮激活模态框解决思路:在window.onload() 方 ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
(一)JQuery动态加载js的三种方法
Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...
python等待网页加载_Python Selenium等待(waits)页面加载完成的三种方法
从网上load的: 网页常常会因为网络原因,程序问题等等导致打开网页慢,一直在那里打圈圈. 出现这种情况时网页里的很多元素就没有加载完成,如果你刚好要定位的元素没有加载完,这时定位的话程序就会抛出异常 ...

网页加载缓慢时，两种方法实现loading效果

网页加载缓慢时，两种方法实现loading效果相关推荐

最新文章

热门文章