结构-行为-样式-Jquery实现延迟加载特效(数据缓冲特效)

最近在做一个地产项目的过程中,原来用的延迟加载的插件在IE下会使浏览器突然缩小,这个让客户很不满意,于是就考虑到兼容性的问题决定自己写一个插件。思路:定义一个代码块,手动加载到页面,然后手动删除。   在项目中调用 的时候就可以实例化这个插件,调用他的打开关闭方法,这个插件主要是在Ajax请求数据的时候需要。

 

Js代码:

define([ 'jquery'], function($){
    function BlockUI(){
        this.boundingBox = null;
    }

    BlockUI.prototype = $.extend({}, {
        renderUI: function(){
            this.boundingBox = $('<div  class="ng-scope block-ui">'+
                '<div  class="block-ui-overlay block-ui-visible"></div>'+
                '<div class="block-ui-message-container ">'+
                    '<div class="block-ui-message">'+
                        '<div class="loading-outer">'+
                            '<div class="loading-logo"></div>'+
                           ' <div class="loading-circle"></div>'+
                        '</div>'+
                    '</div>'+
                    '<div class="loading-text ">数据正在加载中</div>'+
               ' </div>'+
            '</div>');
            this.boundingBox.appendTo(document.body);
        },
        render: function(container){
            this.renderUI();
            $(container || document.body).append(this.boundingBox);
        },
        start: function(){
            this.render();
        },
        stop: function(){
            this.boundingBox.off();
            this.boundingBox.remove();
        }
    })
    return {
        BlockUI: BlockUI
    }
})

 

因为工作需要,本人又把这个插件优化了下,直接扩展Jquery来编写。优化之后,页面上不管多少请求,始终只有一个Mask,这样效果更理想。

 

define([ 'jquery'], function($){
    $.blockUI = $.extend({},{
            token:0,
            renderUI: function(){
                this.boundingBox = $('<div id="myblockui" class="ng-scope block-ui">'+
                    '<div  class="block-ui-overlay block-ui-visible"></div>'+
                    '<div class="block-ui-message-container ">'+
                        '<div class="block-ui-message">'+
                            '<div class="loading-outer">'+
                                '<div class="loading-logo"></div>'+
                               ' <div class="loading-circle"></div>'+
                            '</div>'+
                        '</div>'+
                        '<div class="loading-text ">数据正在加载中</div>'+
                   ' </div>'+
                '</div>');
            },
            render: function(container){
                this.renderUI();
                if($("#myblockui").length){
                    this.token++;
                }else{
                    $(container || document.body).append(this.boundingBox);
                    this.token++;
                }
            },
            start: function(){
                this.render();
            },
            stop: function(){
                this.token--;
                if(this.token == 0){
                    $("#myblockui").remove();
                }
            }
        })
    
})

 

 


显然,你需要把你插入的代码块样式设置一下:

 

.block-ui-message-container{width:200px; height: 60px; left: 50%; top: 50%; margin-top: -30px; margin-left: -30px; position: relative;}
.block-ui-message{border: none; background: none;}
.loading-circle{height: 60px; width: 60px; position: absolute; left: 0; top: 0; background: none; overflow: hidden; z-index: 1;    -webkit-animation:loadingCircle 1.5s 0s linear both  infinite;
    animation:loadingCircle 1.5s 0s linear both  infinite;}
@-webkit-keyframes loadingCircle{0% {transform:translate(0,0) rotate(0);}
    100% {transform:translate(0,0) rotate(360deg);}
}
@keyframes loadingCircle{0% {transform:translate(0,0) rotate(0);}100% {transform:translate(0,0) rotate(360deg);}}
.loading-logo{height:50px;width:66px;position:absolute;left:-4px;top:10px;background:url("../images/logogo.png?22020")   no-repeat left top;overflow:hidden;z-index:2;-webkit-animation:loadingLogo 1s 0.2s linear both infinite;-webkit-transform-origin:center bottom;animation:loadingLogo 1s 0.2s linear both infinite;transform-origin:center bottom;}
@-webkit-keyframes loadingLogo{0%{transform:translate(0,0) scale(1,1);}15%{transform:translate(0,4px) scale(1,1.02);}26%{transform:translate(0,-6px) scale(1,1);}38%{transform:translate(0,0) scale(1,1);}50%{transform:translate(0,0) scale(1,1);}100%{ransform:translate(0,0) scale(1,1);}}
@keyframes loadingLogo
{0%{transform:translate(0,0) scale(1,1);}15%{transform:translate(0,4px) scale(1,1.02);}26%{transform:translate(0,-6px) scale(1,1);}38%{transform:translate(0,0) scale(1,1);}50%{transform:translate(0,0) scale(1,1);}100%{ransform:translate(0,0) scale(1,1);}}
.loading-text
{position:absolute;bottom:-24px;width:120px;text-align:center;left:-30px;font-size:14px;color:#fff;}
.block-ui-overlay.block-ui-visible{opacity:0.6;-ms-filter:"alpha(opacity=60)";}

 

这样就简单地实现了缓冲加载的效果。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洲上牧童

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值