移動端頁面跳轉過程當中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函數便可。