移动端页面跳转过程中loading效果的小实现

最新推荐文章于 2022-08-24 16:15:33 发布

weixin_30241919

最新推荐文章于 2022-08-24 16:15:33 发布

阅读量350

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/ihaveahammer/p/4266953.html

本文介绍了一种简单有效的方法，在页面跳转过程中加入全屏loading动画，以提升移动端用户的体验。通过创建全屏div并展示loading gif或svg，数据加载完成后移除该元素，实现了流畅的页面过渡效果。

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

页面点击链接跳转过程中如果能有loading画面用户体验会好很多，移动端尤其是这样，实现起来也并不难。

大体思路就是：点击按钮的时候创建一个全屏的层级最近的div，div中间装一个loading的gif或者svg。在数据加载完成或者页面跳转的时候将这个div移除即可。

以下是小demo：

 1         function addLoading(){
 2             var loadingWrapper = document.createElement('div');
 3             loadingWrapper.setAttribute('id','loadingWrapper');
 4             loadingWrapper.style.width=window.screen.width+'px';
 5             loadingWrapper.style.height=window.screen.height+'px';
 6             loadingWrapper.style.position='fixed';
 8             loadingWrapper.style.left= 0;
 9             loadingWrapper.style.top= 0;
10             loadingWrapper.style.backgroundColor='rgba(0,0,0,0.4)';
11             var loadingGIF = document.createElement('img');
12             loadingGIF.src='img/spinning-circles.svg';
13             loadingGIF.setAttribute('class','loadingGIF');
14             loadingWrapper.appendChild(loadingGIF);
15             document.body.appendChild(loadingWrapper);
　　　　　　　　 document.body.style.overflow='hidden';
16         }
17         function delLoading(){
18             var loadingWrapper = document.getElementById('loadingWrapper');
19             document.body.removeChild(loadingWrapper);
20         }