今天碰到一个很奇快的需求,大致如下:html页面有很多div容器,每个div容器的数据都是通过ajax请求来处理的。一般情况处理ajax请都在windows的load事件中,由于页面的div容器太多造成windows的load事件中ajax请求太多;所以我们只需要处理那些在浏览器中看得见的div容器。假如我们现在有10个div容器,每个屏幕刚好显示1个div容器,如果我们放到windows的load事件中,那么刚开始就有10个ajax请求。其实用户可能根本不会看到后面几个div容器,所以我们通过这个插件来延迟这些ajax的请求,刚加载页面有1个或2个ajax请求,当滚动条滚到相应div的时候,div再发起ajax请求。
jquery.lazyevent.js插件源代码:
- (function ($, window) {
- var $window = $(window);
-
- $.fn.lazyevent = function (options) {
- var elements = this;
- var settings = {
- threshold: 0,
- event: "scroll",
- container: window,
- skip_invisible: true,
- fn: null,
- data: null
- };
- function update() {
- var counter = 0;
-
- elements.each(function () {
- var $this = $(this);
- if (settings.skip_invisible && !$this.is(":visible")) {
- return;
- }
-
-
-
- if (inviewport(this, settings)) {
- $this.trigger("fire");
- }
- });
-
- }
- if (options) {
- $.extend(settings, options);
- }
- var $container = (settings.container === undefined || settings.container === window) ? $window : $(settings.container);
-
- if (0 === settings.event.indexOf("scroll")) {
- $container.bind(settings.event, function (event) { return update(); });
- }
- this.each(function () {
- var self = this;
- var $self = $(self);
- self.fired = false;
- $self.one("fire", function () {
- if (!this.fired) {
- if (settings.fn) {
- settings.fn.call(self, settings.data);
- }
- self.fired = true;
- var temp = $.grep(elements, function (element) { return !element.fired; });
- elements = $(temp);
- }
- });
-
- if (0 !== settings.event.indexOf("scroll")) {
- $self.bind(settings.event, function (event) {
- if (!self.fired) {
- $self.trigger("fire");
- }
- });
- }
- });
-
- $window.bind("resize", function (event) {
- update();
- });
-
-
- var belowthefold = function (element, settings) {
- var fold;
-
- if (settings.container === undefined || settings.container === window) {
- fold = $window.height() + $window.scrollTop();
- } else {
- fold = $container.offset().top + $container.height();
- }
- return fold <= $(element).offset().top - settings.threshold;
- };
-
- var rightoffold = function (element, settings) {
- var fold;
-
- if (settings.container === undefined || settings.container === window) {
- fold = $window.width() + $window.scrollLeft();
- } else {
- fold = $container.offset().left + $container.width();
- }
-
- return fold <= $(element).offset().left - settings.threshold;
- };
- var abovethetop = function (element, settings) {
- var fold;
-
- if (settings.container === undefined || settings.container === window) {
- fold = $window.scrollTop();
- } else {
- fold = $container.offset().top;
- }
-
- return fold >= $(element).offset().top + settings.threshold + $(element).height();
- };
-
- var leftofbegin = function (element, settings) {
- var fold;
-
- if (settings.container === undefined || settings.container === window) {
- fold = $window.scrollLeft();
- } else {
- fold = $container.offset().left;
- }
-
- return fold >= $(element).offset().left + settings.threshold + $(element).width();
- };
- var inviewport = function (element, settings) {
- return !abovethetop(element, settings) && !leftofbegin(element, settings) &&
- !belowthefold(element, settings) && !rightoffold(element, settings);
-
- };
- update();
- return this;
- };
-
- })(jQuery, window);
jquery.lazyevent..min.js代码:
- (function(a,c){var b=a(c);a.fn.lazyevent=function(j){var g=this;var l={threshold:0,event:"scroll",container:c,skip_invisible:true,fn:null,data:null};function m(){var n=0;g.each(function(){var o=a(this);if(l.skip_invisible&&!o.is(":visible")){return}if(h(this,l)){o.trigger("fire")}})}if(j){a.extend(l,j)}var d=(l.container===undefined||l.container===c)?b:a(l.container);if(0===l.event.indexOf("scroll")){d.bind(l.event,function(n){return m()})}this.each(function(){var o=this;var n=a(o);o.fired=false;n.one("fire",function(){if(!this.fired){if(l.fn){l.fn.call(o,l.data)}o.fired=true;var p=a.grep(g,function(q){return !q.fired});g=a(p)}});if(0!==l.event.indexOf("scroll")){n.bind(l.event,function(p){if(!o.fired){n.trigger("fire")}})}});b.bind("resize",function(n){m()});var f=function(n,p){var o;if(p.container===undefined||p.container===c){o=b.height()+b.scrollTop()}else{o=d.offset().top+d.height()}return o<=a(n).offset().top-p.threshold};var k=function(n,p){var o;if(p.container===undefined||p.container===c){o=b.width()+b.scrollLeft()}else{o=d.offset().left+d.width()}return o<=a(n).offset().left-p.threshold};var e=function(n,p){var o;if(p.container===undefined||p.container===c){o=b.scrollTop()}else{o=d.offset().top}return o>=a(n).offset().top+p.threshold+a(n).height()};var i=function(n,p){var o;if(p.container===undefined||p.container===c){o=b.scrollLeft()}else{o=d.offset().left}return o>=a(n).offset().left+p.threshold+a(n).width()};var h=function(n,o){return !e(n,o)&&!i(n,o)&&!f(n,o)&&!k(n,o)};m();return this}})(jQuery,window);
html调用代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>lazyevent</title>
- <script type="text/javascript" src="Scripts/jquery-1.7.js"></script>
- <script type="text/javascript" src="Scripts/jquery.lazyevent.js"></script>
- <style type="text/css">
- /* .test
- {
- height: 500px;
- display: inline-block;
- width: 4000px;
- }
- .test div
- {
- float: left;
- }
- */.test div
- {
- width: 500px;
- height: 500px;
- }
- </style>
- </head>
- <body>
- <div style="height: 200px">
- </div>
- <div class="test">
- <div style="background-color: Green">
- Green</div>
- <div style="background-color: Lime">
- Lime</div>
- <div style="background-color: Maroon; display:none">
- Maroon</div>
- <div style="background-color: Olive">
- Olive</div>
- <div style="background-color: Red; display: none">
- Red</div>
- <div style="background-color: ButtonFace">
- ButtonFace</div>
- <div style="background-color: Aqua">
- Aqua</div>
- <div style="background-color: AppWorkspace">
- AppWorkspace</div>
- </div>
- <script type="text/javascript">
- $(function () {
- $(".test div").lazyevent({
- data: "hello word",
- fn: function (data) {
- var html = $(this).html();
- alert(data + ":" + html);
- }
- });
- });
- </script>
- </body>
- </html>
分享到:
相关推荐
aniAuto一个基于 animate.css 的jquery插件,只需添加一些标签属性和一行js脚本就可以组合出复杂的动画效果.配置项可用配置项初始隐藏 (attribute) ani-init-hide延迟 (attribute) ani-delay持续时长 (attribute) ...
第3章介绍如何通过jQuery的事件处理机制,在浏览器发生事件时触发行为。同时,还会介绍如何以不唐突的方式添加事件(甚至在页面加载完成之前)。此外,这一章还将深入更高级的主题,例如事件冒泡、委托和命名空间。 ...
基于JQuery的一款滑动切换插件,就是大家熟悉的滑动门和选项卡,也称为Tab标签,不过本插件内含有多款标签,有的带有动画效果,带有注释,不熟悉网页的也可轻松上手。一些代码注释: * defaultIndex - 默认选中的...
ScrollStory ScrollStory是一个jQuery插件,用于构建基于滚动的故事。 它不是执行特定任务,而是旨在成为帮助解决一般问题的工具。 例如,当您向下滚动页面时,它可以帮助您更新导航。 单击鼠标或自定义事件,它可以...
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的...
jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect,支持自主开发Plugin。 几个亮点: 在当前 trigger 中 ...
选择器速度提升 选择器的速度大幅度提高了,下表为jQuery1.1.2和1.1.3的选择器速度对比,提高了8倍多 Browser jQuery 1.1.2 jQuery 1.1.3 % Improvement IE 6 4890ms 661ms 740% Firefox 2 5629ms 567...
内容索引:脚本资源,jQuery,jQueryUI,Switchable jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect,支持自主开发...
在上一篇文章 《鼠标事件延时切换插件》 中,我已经写了几个简单的延时器的例子,今天突然想到jQuery的自定义动画的animate方法可以使用delay
添加:扩展textarea的change事件,使之可以触发编辑器的change 添加:UBB演示demo07添加字节数统计演示 添加:内置Ajax上传和showIframeModal接口参数中的url地址可以使用“{editorRoot}”内置变量,用来定位编辑...
07 jquery扩展与插件 08 jquery扩展补充 09 本周作业轮播图以及思路 第45章 轮播图片css部分 轮播图片js部分 第46章 01 数据库与dbms的概念 02 sql规范 03 数据库操作DDL 04 python s3 day46 mysql的数据类型 05...
-修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack->AutoPostBack, Event PostBack->EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...
您是否需要在元素每次进入视口时触发动画? 好吧,这是我们的插件开箱即用的。 此外,您将能够设置动画的延迟,偏移,想要动画的次数以及动画的持续时间。 所有这些都通过数据属性! Tadaam是一个轻量级,结构良好...
-修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack->AutoPostBack, Event PostBack->EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...
方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例: $('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'}); 特别说明:两种初始化方法只能选择其中一种使用,如果...