jquery实现页面等待时的交互效果

最新推荐文章于 2022-06-28 11:42:45 发布

@航空母舰

最新推荐文章于 2022-06-28 11:42:45 发布

阅读量682

点赞数

分类专栏： UI设计

本文链接：https://blog.csdn.net/hudeyong926/article/details/118883130

版权

UI设计专栏收录该内容

31 篇文章 1 订阅

订阅专栏

如果当页面加载速度不是很快甚至很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）那么就会十分的影响用户体验，页面加载所需要时间越长，那么可能损失的用户量就会多。所以在恰当的时候使用loading是解决网页加载缓慢时与用户交互的最好解决方案。下面就说一说笔者本人如何实现页面loading效果的。如有大家更好的解决方案，也可以分享出来

思路详解：

在页面加载前就先加载一个div罩，等待页面全部加载完成后，关闭此div罩

.spinner {
  width: 60px;
  height: 60px;
  background-color: #67CF22;
 
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
  
}
 
@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
 
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

//获取浏览器页面可见高度和宽度  
var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）  
var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0,
    _LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容  
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFFFFF;opacity:1.0;filter:alpha(opacity=80);z-index:10000;"><div class="spinner" style="position: top: 60px; margin:' + _LoadingTop + 'px auto ;"></div></div>';
//呈现loading效果  
document.write(_LoadingHtml);
//监听加载状态改变  
document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果  
function completeLoading() {
    if (document.readyState == "complete") {
        $("#loadingDiv").fadeOut(1500);
    }
}

上面两段代码放在head中间即可

<head>
<link rel="stylesheet" href="loading.css">
<script src="loading.js"></script>
</head>

@航空母舰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现页面等待时的交互效果

前端在请求后台有时候需要较长的一段时间，如果不给不用户一些提示性的消息，如正在加载之类的，用户可能会以为页面已死，所以还是得简单的做点交互才行。思路详解：在页面加载前就先加载一个div罩，等待页面全部加载完成后，关闭此div罩.spinner { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s inf
复制链接

扫一扫