spinjs实现加载效果

snifes 发布于2019-08-20 18:17 / 3062人阅读

摘要：最近做的一个项目是客户端里面包了页面，客户端向后台发送请求有可能费时较长，因此需要在服务器响应期间在页面实现动态加载效果。为了实现加载效果必须将同步请求改成异步的。

最近做的一个项目是C#客户端里面包了html页面，客户端向后台发送请求有可能费时较长，因此需要在服务器响应期间在页面实现动态加载效果。
最开始基于安全考虑所有的前端请求都是走C#同步请求，这就带来两个问题
1.同步请求用时较长，导致页面出现假死状态，请求回来之前页面渲染被阻塞
2.同步没办法使用加载效果，原因是浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使DOM操作语句是在发起请求的前一句，这个同步请求也会“迅速”将UI线程阻塞，不给它执行的时间。在同步请求前后showLoading/hideLoading都没办法起作用。
为了实现加载效果必须将同步请求改成异步的。
官方网站：http://spin.js.org/

使用方法
第一步：引入js包
第二步：需要在页面定义一个菊花加载的背景，一般是个正方形的div作为target

#loadingBox
{    
    margin:40px auto 5px;
    width:300px;
    height:300px;
    border-style: solid;
    border-width: 1px;
    border-color: #DF7401;
    background: #EFF5FB;
    text-align: center;
    line-height: 300px;
    color:#2E2EFE;
}

第三步：自定义花瓣的数量大小旋转速度等参数

var opts = {
            //innerImage: {url: "../img/logo.png", width: 56, height: 56 }, //内部图片            
            lines: 13, // 花瓣数目
            length: 20, // 花瓣长度
            width: 10, // 花瓣宽度
            radius: 30, // 花瓣距中心半径
            corners: 1, // 花瓣圆滑度 (0-1)
            rotate: 0, // 花瓣旋转角度
            direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
            color: "#5882FA", // 花瓣颜色
            speed: 1, // 花瓣旋转速度
            trail: 60, // 花瓣旋转时的拖影(百分比)
            shadow: false, // 花瓣是否显示阴影
            hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
            className: "spinner", // spinner css 样式名称
            zIndex: 2e9, // spinner的z轴 (默认是2000000000)
            top: "auto", // spinner 相对父容器Top定位 单位 px
            left: "auto", // spinner 相对父容器Left定位 单位 px
            position: "relative", // element position
            progress: true,      // show progress tracker
            progressTop: 0,       // offset top for progress tracker
            progressLeft: 0       // offset left for progress tracker
        };

然后启动加载效果

var spinner = new Spinner(opts);
var target = document.getElementById("loadingBox");
spinner.spin(target);

停止加载

spinner.spin();

完。

GPU云服务器云服务器加载loading效果 js数据加载效果 php下拉加载效果 html加载动态效果

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

转载请注明本文地址：https://www.ucloud.cn/yun/84301.html

看完你也想编写自己的 react 插件

摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。副标题----为什么我要写这个 react 插件图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点：没有只针对 image 懒加载组件。多...

Vixb 2019-08-30 14:06 评论0 收藏0
看完你也想编写自己的 react 插件

摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。副标题----为什么我要写这个 react 插件图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点：没有只针对 image 懒加载组件。多...

zhou_you 2019-08-22 15:13 评论0 收藏0
看完你也想编写自己的 react 插件

摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。副标题----为什么我要写这个 react 插件图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点：没有只针对 image 懒加载组件。多...

xingpingz 2019-08-01 18:40 评论0 收藏0
解耦图片加载库

摘要：但是当我们需要更换图片加载库时，却发现这是一项艰巨的任务。高斯模糊效果是一个很耗性能的一个操作，很容易引起，所以在使用时应将尽可能的缩小，同时选择一个稳定的实现方式。在APP开发过程，图片加载是一个不可或缺的模块，一般我们都会使用比较成熟的开源库，如Fresco, ImageLoader, Glide等。这些开源库也都提供了简洁的使用方式，使我们可以快速完成图片的加载过程。但是当我...

newtrek 2019-08-16 11:01 评论0 收藏0