结构-行为-样式-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)";}

 

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