成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

加載中的效果制作

BoYang / 1595人閱讀

摘要：本文主要對(duì)加載中的效果，和加載進(jìn)度的各類(lèi)情況做一初步的調(diào)研。利用制作加載中的效果可以制作出非常漂亮的加載中的效果，這里只列出幾個(gè)比較簡(jiǎn)單的加載中的效果制作過(guò)程。

對(duì)于比較加載比較慢的頁(yè)面、大的圖片、后臺(tái)交互時(shí)間長(zhǎng)等一系列需要等待的效果，加載中的提示出現(xiàn)會(huì)很有必要。本文主要對(duì)加載中的css效果，和加載進(jìn)度的各類(lèi)情況做一初步的調(diào)研。

1、利用css3制作加載中的效果

css3可以制作出非常漂亮的加載中的效果，這里只列出幾個(gè)比較簡(jiǎn)單的加載中的效果制作過(guò)程。
（1）豎線(xiàn)的進(jìn)度條效果：利用分別設(shè)置5個(gè)

  • 的高度變化

    


    
    Document

    (2) 轉(zhuǎn)動(dòng)的圓圈

    


    
    Document
    2、利用頁(yè)面的加載狀態(tài)判斷

    頁(yè)面加載狀態(tài)改變時(shí)的事件：document.onreadystatechange
    當(dāng)前文檔狀態(tài)：document.readystate
    有如下的狀態(tài)：
    （1）uninitialized-還未開(kāi)始載入
    （2）loading-載入中
    （3）interactive-已加載，文檔可以與用戶(hù)開(kāi)始交互
    （4）complete-載入完成

    document.onreadystatechange=function(){
            if(document.readyState=="complete"){
               $("loading").fadeOut()
            }
        }
    3、文件上傳進(jìn)度加載提示

    onprogress事件是XMLHttpRequest的子對(duì)象XMLHttpRequestUpload中的一個(gè)事件。該事件每隔100ms向客戶(hù)端返回一次數(shù)據(jù)，包括文件已上傳的大小loaded和總大小total.

    xhr.upload.onprogress = function(evt){
  console.log(evt);  //evt是onprogress事件的對(duì)象
}

    完整的html代碼如下：

    


    
    Document


    
    
    
    
        
    
    

    
    
    
        選擇文件：

    • 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94184.html

    相關(guān)文章

    • 淺談工作中設(shè)計(jì)、制作和程序之間的配合

      摘要：最后再說(shuō)一下程序方面，因?yàn)樾【幨且幻谱?，所以程序方面的配合了解到的也就是平常?xiàng)目中經(jīng)常遇到的。最后做一下總結(jié)，在一個(gè)項(xiàng)目的進(jìn)行中，設(shè)計(jì)制作程序三者之間是密不可分的，而各個(gè)部分之間需要相互配合，才能將項(xiàng)目做的更好。 以下是我在平常工作中所遇到的，文筆不是很好，求大神輕噴。在項(xiàng)目進(jìn)行的過(guò)程中，主要分為設(shè)計(jì)--制作--程序這三個(gè)步驟，首先先從設(shè)計(jì)頁(yè)面開(kāi)始，包括頁(yè)面上面的諸多效果在內(nèi)。而制作...

      leone 評(píng)論0 收藏0

    • 淺談工作中設(shè)計(jì)、制作和程序之間的配合

      摘要：最后再說(shuō)一下程序方面，因?yàn)樾【幨且幻谱?，所以程序方面的配合了解到的也就是平常?xiàng)目中經(jīng)常遇到的。最后做一下總結(jié)，在一個(gè)項(xiàng)目的進(jìn)行中，設(shè)計(jì)制作程序三者之間是密不可分的，而各個(gè)部分之間需要相互配合，才能將項(xiàng)目做的更好。 以下是我在平常工作中所遇到的，文筆不是很好，求大神輕噴。在項(xiàng)目進(jìn)行的過(guò)程中，主要分為設(shè)計(jì)--制作--程序這三個(gè)步驟，首先先從設(shè)計(jì)頁(yè)面開(kāi)始，包括頁(yè)面上面的諸多效果在內(nèi)。而制作...

      jsliang 評(píng)論0 收藏0

    • js初級(jí)應(yīng)用之canvas制作圖片水印

      摘要：在出現(xiàn)之前，項(xiàng)目中的圖片添加水印的需求，必定是后端同學(xué)們來(lái)處理的，但是出來(lái)之后，前端終于可以站出來(lái)說(shuō)，這個(gè)需求，交給我來(lái)壯哉我大前端，上周的任務(wù)就是在前端處理水印的效果，這個(gè)效果最重要的邏輯其實(shí)就幾行代碼，至于如何優(yōu)雅的將這些簡(jiǎn)單的邏輯封裝 在canvas出現(xiàn)之前，項(xiàng)目中的圖片添加水印的需求，必定是后端同學(xué)們來(lái)處理的，但是canvas出來(lái)之后，前端終于可以站出來(lái)說(shuō)，這個(gè)需求，交給我來(lái)！...

      xiaowugui666 評(píng)論0 收藏0

    • [phaser3入門(mén)探坑]使用phaser3制作山寨馬里奧

      摘要：前言是一個(gè)優(yōu)秀的前端庫(kù)，封裝了很多底層的實(shí)現(xiàn)，可以用來(lái)制作游戲，場(chǎng)景等。今年月新發(fā)布了，到今天為止已經(jīng)更新到了。聲明本游戲來(lái)自于小站的官方教程，加入了一些個(gè)人的注釋?zhuān)疚闹荚趲椭魑挥^眾老爺快速上手。 前言 phaser是一個(gè)優(yōu)秀的前端canvas庫(kù)，封裝了很多底層的實(shí)現(xiàn)，可以用來(lái)制作游戲，h5場(chǎng)景等。今年1月新發(fā)布了phaser3，到今天為止已經(jīng)更新到了3.30。 聲明 本游戲來(lái)自于...

      szysky 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    閱讀需要支付1元查看
    <