资讯专栏INFORMATION COLUMN

spinjs实现加载效果

snifes / 2809人阅读

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

最近做的一个项目是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();

完。

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

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

相关文章

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

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

    Vixb 评论0 收藏0
  • 看完你也想编写自己的 react 插件

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

    zhou_you 评论0 收藏0
  • 看完你也想编写自己的 react 插件

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

    xingpingz 评论0 收藏0
  • 解耦图片加载

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

    newtrek 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<