av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

為你的Web程序加個啟動畫面

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

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

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

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

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

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

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

進(jìn)度的獲取

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

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

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

插曲：在我探索如何獲取頁面真實下載進(jìn)度的過程中，研究了pace.js的代碼，一個做得非常棒的頁面加載進(jìn)度插件，發(fā)現(xiàn)他內(nèi)部也是這么干的，頁面上顯示的進(jìn)度并不真實返回頁面加載的實現(xiàn)進(jìn)度，只是不斷的增加而以，等頁面加載完了再拖到100%。當(dāng)然該庫寫得比較完善，處理了各種情況比如ajax，web socket等。另外就是Gmail，經(jīng)過大量（也有可能只有兩三次，請不必太認(rèn)真）的刷新頁面嘗試之后，我發(fā)現(xiàn)個規(guī)律，它的進(jì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)簽中。

 
 
    
  
  
    2. 
  
  
  2.     
    3. 
  
  
  3.         
    4. 
  
  
  4.             
  •         
  •         不要回來，馬上走開...

  •         
  •             
  •             
  •         
  •     

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

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

    模擬耗時的操作

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

    當(dāng)然可以用setTimeout來達(dá)到目的，但不太科學(xué)吧，還是要弄得真實點。于是我們在頁面放一個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.             $(function(){
      15. 
  
  
    15.                 NProgress.configure({
      16. 
  
  
    16.                     template: $('#splash-template').html()
      17. 
  
  
    17.                 });
      18. 
  
  
    18.                 NProgress.start();
      19. 
  
  
    19.             });
      20. 
  
  
    20.             $(window).load(function(){
      21. 
  
  
    21.                 NProgress.done();
      22. 
  
  
    22.             })
      23. 
  
  
    23.         
      24. 
  
  
    24.     
      25. 
  
  
    25.     
      26. 
  
  
    26.         
      27. 
  
  
    27.             
      28. 
  
  
    28.                 
      29. 
  
  
    29.                     
      30. 
  
  
    30.                 
      31. 
  
  
    31.                 不要回來，馬上走開...
      32. 
  
  
    32.                 
      33. 
  
  
    33.                     
      34. 
  
  
    34.                     
      35. 
  
  
    35.                 
      36. 
  
  
    36.             
      37. 
  
  
    37.         
      38. 
  
  
    38.         
      39. 
  
  
    39.     
      40. 
  
  
    40.

    加入些美化的樣式：

    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ù)覽請點我

     Reference


    當(dāng)前名稱：為你的Web程序加個啟動畫面
    路徑分享：http://uogjgqi.cn/article/cdhjihs.html
    掃二維碼與項目經(jīng)理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

    其他資訊