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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了结构-行为-样式-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
    }
})

 


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

 

.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)";}

 

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

 

以上是关于结构-行为-样式-Jquery实现延迟加载特效(数据缓冲特效)的主要内容,如果未能解决你的问题,请参考以下文章

jquery图片延迟加载 及 serializeArrayserialize用法记录

前端分享 — jQuery.lazyload详解

结构-行为-样式-Js排序算法之 快速排序

前端懒加载以及预加载

结构和样式,行为的分离

jQuery图片延迟加载插件jQuery.lazyload 的使用