结构-行为-样式-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实现延迟加载特效(数据缓冲特效)的主要内容,如果未能解决你的问题,请参考以下文章