加載中的效果制作

BoYang 發布于2019-08-22 16:15 / 1571人閱讀

摘要：本文主要對加載中的效果，和加載進度的各類情況做一初步的調研。利用制作加載中的效果可以制作出非常漂亮的加載中的效果，這里只列出幾個比較簡單的加載中的效果制作過程。

對于比較加載比較慢的頁面、大的圖片、后臺交互時間長等一系列需要等待的效果，加載中的提示出現會很有必要。本文主要對加載中的css效果，和加載進度的各類情況做一初步的調研。

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

css3可以制作出非常漂亮的加載中的效果，這里只列出幾個比較簡單的加載中的效果制作過程。
（1）豎線的進度條效果：利用分別設置5個

的高度變化




    
    Document

(2) 轉動的圓圈




    
    Document

2、利用頁面的加載狀態判斷

頁面加載狀態改變時的事件：document.onreadystatechange
當前文檔狀態：document.readystate
有如下的狀態：
（1）uninitialized-還未開始載入
（2）loading-載入中
（3）interactive-已加載，文檔可以與用戶開始交互
（4）complete-載入完成

document.onreadystatechange=function(){
            if(document.readyState=="complete"){
               $("loading").fadeOut()
            }
        }

3、文件上傳進度加載提示

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

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

完整的html代碼如下：

云服務器 GPU云服務器加載loading效果 js數據加載效果 php下拉加載效果 html加載動態效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94184.html

淺談工作中設計、制作和程序之間的配合

摘要：最后再說一下程序方面，因為小編是一名制作，所以程序方面的配合了解到的也就是平常項目中經常遇到的。最后做一下總結，在一個項目的進行中，設計制作程序三者之間是密不可分的，而各個部分之間需要相互配合，才能將項目做的更好。以下是我在平常工作中所遇到的，文筆不是很好，求大神輕噴。在項目進行的過程中，主要分為設計--制作--程序這三個步驟，首先先從設計頁面開始，包括頁面上面的諸多效果在內。而制作...

leone 2019-08-29 11:17 評論0 收藏0
淺談工作中設計、制作和程序之間的配合

摘要：最后再說一下程序方面，因為小編是一名制作，所以程序方面的配合了解到的也就是平常項目中經常遇到的。最后做一下總結，在一個項目的進行中，設計制作程序三者之間是密不可分的，而各個部分之間需要相互配合，才能將項目做的更好。以下是我在平常工作中所遇到的，文筆不是很好，求大神輕噴。在項目進行的過程中，主要分為設計--制作--程序這三個步驟，首先先從設計頁面開始，包括頁面上面的諸多效果在內。而制作...

jsliang 2019-08-01 15:43 評論0 收藏0
js初級應用之canvas制作圖片水印

摘要：在出現之前，項目中的圖片添加水印的需求，必定是后端同學們來處理的，但是出來之后，前端終于可以站出來說，這個需求，交給我來壯哉我大前端，上周的任務就是在前端處理水印的效果，這個效果最重要的邏輯其實就幾行代碼，至于如何優雅的將這些簡單的邏輯封裝在canvas出現之前，項目中的圖片添加水印的需求，必定是后端同學們來處理的，但是canvas出來之后，前端終于可以站出來說，這個需求，交給我來！...

xiaowugui666 2019-08-21 10:45 評論0 收藏0
[phaser3入門探坑]使用phaser3制作山寨馬里奧

摘要：前言是一個優秀的前端庫，封裝了很多底層的實現，可以用來制作游戲，場景等。今年月新發布了，到今天為止已經更新到了。聲明本游戲來自于小站的官方教程，加入了一些個人的注釋，本文旨在幫助各位觀眾老爺快速上手。前言 phaser是一個優秀的前端canvas庫，封裝了很多底層的實現，可以用來制作游戲，h5場景等。今年1月新發布了phaser3，到今天為止已經更新到了3.30。聲明本游戲來自于...

szysky 2019-08-22 15:43 評論0 收藏0