加载中的效果制作

BoYang 发布于2019-08-22 16:15 / 1261人阅读

摘要：本文主要对加载中的效果，和加载进度的各类情况做一初步的调研。利用制作加载中的效果可以制作出非常漂亮的加载中的效果，这里只列出几个比较简单的加载中的效果制作过程。

对于比较加载比较慢的页面、大的图片、后台交互时间长等一系列需要等待的效果，加载中的提示出现会很有必要。本文主要对加载中的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代码如下：

云服务器海外云主机加载loading效果 js数据加载效果 php下拉加载效果 html加载动态效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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