首页 > 代码库 > 结构-行为-样式-Jquery实现延迟加载特效（数据缓冲特效）
结构-行为-样式-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实现延迟加载特效（数据缓冲特效）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。