移动端页面跳转过程中loading效果的小实现
页面点击链接跳转过程中如果能有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 }
在点击链接的时候调用addLoading函数，在关闭loading画面的时候調用delLoading函数即可。