日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
為你的Web程序加個啟動畫面

 .Net開發(fā)者一定熟悉下面這個畫面：

這就是宇宙***IDE Visual Studio的啟動畫面，學(xué)名叫Splash Screen（或者Splash Window）。同樣，Javar們一定對Eclipse的啟動畫面不會陌生。不只是IDE，很多桌面程序都會有這個Splash 窗口，在程序進(jìn)行初始化時顯示。

這方面做得最贊的非Adobe旗下的設(shè)計(jì)類軟件莫數(shù)了，畢竟是搞藝術(shù)出身的啊。博主從PS 8.0用起，每次升級新版本激動的不是新功能，首先是激動新的啟動畫面。下圖是***CC版PS的Splash Screen。視覺效果震撼的一逼。。張牙舞爪的，無出其右。

啟動畫面也不是桌面程序所獨(dú)有，完全可以在我們的網(wǎng)頁中實(shí)現(xiàn)。并且隨著時間的推移，現(xiàn)在Web應(yīng)用越來紛繁復(fù)雜，加載也是很費(fèi)時的，一個Splash Screen就顯得很有必要了不是么。

比如谷哥的Gmail，要是全屏運(yùn)行，就一個原生App的感覺。

下面我們就來為我們的Web應(yīng)用加上Gmail一樣的Splash Screen。程序可以很渣，若表面功夫到位了同樣可以顯得高端大氣上檔次。

效果預(yù)覽請點(diǎn)我   瀏覽代碼請點(diǎn)我

進(jìn)度的獲取

展示靜態(tài)圖片還好，如果你的啟動界面要顯示程序進(jìn)行的進(jìn)度的話，一個很棘手的問題來了，如何獲取進(jìn)度。經(jīng)過大量的調(diào)研（寫過論文的同學(xué)都知道，類似'經(jīng)過大量實(shí)驗(yàn)表明…'的表述其實(shí)很有可能是只做了一次實(shí)驗(yàn)就開始寫結(jié)論了）我發(fā)現(xiàn)，沒有辦法獲取一個頁面的實(shí)際下載進(jìn)度！當(dāng)然，不排除我孤陋寡聞，如果你知道這樣的方法請告訴我。

對于頁面中的異步操作，倒是可以監(jiān)聽到進(jìn)度的。但也得分情況。HTML5規(guī)范中，Ajax多了個progress事件，通過它可以獲取異步操作的完成情況，但前提是event.lengthComputable屬性為真是才管用。也就是說有些請求的結(jié)果我們是可以知道大小的，但更多時候服務(wù)器返回的內(nèi)容的大小是不確定的，這種情況下即使你監(jiān)聽了progress事件也無法獲取真實(shí)的操作進(jìn)度。

既然如此，那我們就不要那么死磕，具體進(jìn)行到百分之幾意義不大，我們的目的是提高用戶體驗(yàn)，在用戶等待的這個過程中有東西可看，或者有一個活著的會動的東西表明程序還在跑而不是出錯了卡死了。所以給用戶展示一個會動的進(jìn)度條即可（我相信大多數(shù)帶進(jìn)度條的程序也是這么干的），直到頁面全部加載完成時把進(jìn)度條托到100%。

插曲：在我探索如何獲取頁面真實(shí)下載進(jìn)度的過程中，研究了pace.js的代碼，一個做得非常棒的頁面加載進(jìn)度插件，發(fā)現(xiàn)他內(nèi)部也是這么干的，頁面上顯示的進(jìn)度并不真實(shí)返回頁面加載的實(shí)現(xiàn)進(jìn)度，只是不斷的增加而以，等頁面加載完了再拖到100%。當(dāng)然該庫寫得比較完善，處理了各種情況比如ajax，web socket等。另外就是Gmail，經(jīng)過大量（也有可能只有兩三次，請不必太認(rèn)真）的刷新頁面嘗試之后，我發(fā)現(xiàn)個規(guī)律，它的進(jìn)度條會一路跑到一個點(diǎn)然后停下來，然后再一路跑到終點(diǎn)！之前的結(jié)論。（不過谷歌擁有牛逼烘烘的工程師，不排除他用了啥高科技算法在里面能夠精確地返回頁面加載的進(jìn)度。Anyway, 如果我這里的結(jié)論錯，請別太認(rèn)真找我麻煩）

Nprogress

方便起見，這里使用nprogress這個JS庫來顯示動畫。它提供了很方便的幾個API可供我們使用。

NProgress.start() — 啟動進(jìn)度條

NProgress.set(0.4) — 將進(jìn)度設(shè)置到具體的百分比位置

NProgress.inc() — 少量增加進(jìn)度

NProgress.done() — 將進(jìn)度條標(biāo)為完成狀態(tài)

定義我們的Splash Screen

好的，思路出來了下面我們就開始毫無技術(shù)含量的施工。

具體來說，首先頁面只顯示我們預(yù)先定義好的Splash Screen，它要占滿整個屏幕且z-index設(shè)為頁面中***。

這里直接借用Juri 發(fā)表在他博客中的代碼，不過我們使用我之前一篇博文《前端冷知識集錦》可提到的技巧，將HTML代碼存放在一個script標(biāo)簽中。

 
 
    
  
  
  1.

這個splash screen會在HTML加載好之后***時間顯示。接下來就可以這樣做了，在頁面最開始調(diào)用 Nprogress.start()啟動進(jìn)度條，而在這個splash screen下方遮住的頁面中，繼續(xù)我們程序的初始化，做其他一些非常耗時的操作等。比如你想象一下Gmail，最開始可能頁面只有顯示進(jìn)度條那些基本的HTML和JS代碼，然后需要向服務(wù)器請求大量的郵件信息，數(shù)據(jù)接收完后，再組織成HTML生成郵件列表append到頁面，但這個過程因?yàn)楸贿M(jìn)度條擋住了，所以我們看不見。等一切就緒，再調(diào)用Nprogress.done()將進(jìn)度條隱藏。這時你看到的就是一個完整的頁面了。

事件的順序

window.onload事件是在整個頁面加載完成，包括其中所有圖片，iframe等。所以，可以確定在這個事件里面把進(jìn)度搞到100%是沒有問題且邏輯正確的。

確定了何時結(jié)束再來看何時開始。既然我們一開始就要顯示Splash Window且操作之前定義好的splash screen模板，意思就是說再怎么早開始也得等我們splash screen部分的HTML加載完成之后再進(jìn)行吧。所以，得到的結(jié)論就是把進(jìn)度條開始的代碼放在這部分HTML代碼之后，但這種HTML中插JS的做法很不好，所以***決定還是放在$(document).ready()里面，因?yàn)檫@個事件是在頁面HTML加載完后觸發(fā)的，但只是DOM，不包括其他比如上面提到的圖片，iframe等，所以它是比window.onload先觸發(fā)的。

所以在頁面的head標(biāo)簽里面加入以下代碼：

 
 
    
  
  
  1. $(function() {
    2. 
  
  
  2.     NProgress.configure({
    3. 
  
  
  3.         template: $('#splash-template').html()
    4. 
  
  
  4.     });
    5. 
  
  
  5.     NProgress.start();
    6. 
  
  
  6. });
    7. 
  
  
  7. $(window).load(function() {
    8. 
  
  
  8.     NProgress.done();
    9. 
  
  
  9. })
    10.

 實(shí)際應(yīng)用中更科學(xué)的做法其實(shí)應(yīng)該是這樣的，頁面只有關(guān)于進(jìn)度條的代碼，程序的內(nèi)容全部通過Ajax填充到頁面，然后在頁面中監(jiān)視所有Ajax的返回情況。

模擬耗時的操作

一切就緒了，但需要解決一個事情就是如何模擬耗時的操作。我們現(xiàn)在弄的這個例子它不費(fèi)時，無法看到緩慢的加載效果，并且本地測試，放上幾十張圖片都會很快就完事。

當(dāng)然可以用setTimeout來達(dá)到目的，但不太科學(xué)吧，還是要弄得真實(shí)點(diǎn)。于是我們在頁面放一個iframe，從其他網(wǎng)站引用頁面，這樣多少會有些加載的時間。

所以這個例子***的代碼差不多是這樣的了：

HTML：

 
 
    
  
  
  1. 
  
  
  2. 
  
  
  3.     
    4. 
  
  
  4.         
    5. 
  
  
  5.         
    6. 
  
  
  6.         
    7. 
  
  
  7.         
    8. 
  
  
  8.         splash screen example
    9. 
  
  
  9.         
    10. 
  
  
  10.         
    11. 
  
  
  11.         
    12. 
  
  
  12.         
    13. 
  
  
  13.         
    14. 
  
  
  14.     
    15. 
  
  
  15.     
    16. 
  
  
  16.         
    17. 
  
  
  17.         
    18. 
  
  
  18.     
    19. 
  
  
  19.

加入些美化的樣式：

CSS：

 
 
    
  
  
  1. html,body,iframe{
    2. 
  
  
  2.     margin: 0;
    3. 
  
  
  3.     padding: 0;
    4. 
  
  
  4. }
    5. 
  
  
  5. 
  
  
  6. #nprogress{
    7. 
  
  
  7.     position: fixed;
    8. 
  
  
  8.     top: 0;
    9. 
  
  
  9.     right: 0;
    10. 
  
  
  10.     bottom: 0;
    11. 
  
  
  11.     left: 0;
    12. 
  
  
  12.     background-color: #f7f7f7;
    13. 
  
  
  13.     z-index: 999;
    14. 
  
  
  14. }
    15. 
  
  
  15. .spinner-icon{
    16. 
  
  
  16.     display: none!important;
    17. 
  
  
  17. }
    18. 
  
  
  18. 
  
  
  19. .splash {
    20. 
  
  
  20.     position:absolute;
    21. 
  
  
  21.     top:40%;
    22. 
  
  
  22.     left:0;
    23. 
  
  
  23.     right:0;
    24. 
  
  
  24.     margin: auto;
    25. 
  
  
  25.   }
    26. 
  
  
  26. 
  
  
  27.   .splash img {
    28. 
  
  
  28.     display: block;
    29. 
  
  
  29.     margin-left: auto;
    30. 
  
  
  30.     margin-right: auto;
    31. 
  
  
  31.     height: 100px;
    32. 
  
  
  32.     width: 100px;
    33. 
  
  
  33.   }
    34. 
  
  
  34. 
  
  
  35.   .card {
    36. 
  
  
  36.     background-color: #f7f7f7;
    37. 
  
  
  37.     padding: 20px 25px 15px;
    38. 
  
  
  38.     margin: 0 auto 25px;
    39. 
  
  
  39.     width: 380px;
    40. 
  
  
  40.   }
    41. 
  
  
  41. 
  
  
  42.   .mybar {
    43. 
  
  
  43.     background: #29d;
    44. 
  
  
  44.     height:10px;
    45. 
  
  
  45.   }
    46. 
  
  
  46. 
  
  
  47.   .progress {
    48. 
  
  
  48.     height: 10px;
    49. 
  
  
  49.     overflow: hidden;
    50. 
  
  
  50.   }
    51.

 現(xiàn)在可以運(yùn)行頁面查看效果了。好了，就這么多。效果預(yù)覽請點(diǎn)我

 Reference

  • Intercept Page Load: https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Intercepting_Page_Loads
  • Gmail-style progress bar when page is loading http://stackoverflow.com/questions/8020929/gmail-style-progress-bar-when-page-is-loading
  • http://www.gayadesign.com/scripts/queryLoader/
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress
  • http://api.jquery.com/jQuery.ajax/
  • http://stackoverflow.com/questions/15328275/show-progressbar-while-loading-pages-using-jquery-ajax-in-single-page-website
  • http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
  • http://github.hubspot.com/pace/
  • http://onextrapixel.com/examples/youtube-like-ajax-loading-bar/

新聞名稱：為你的Web程序加個啟動畫面
本文來源：http://www.5511xx.com/article/cdhjihs.html