jquery.scrollLoading.js
2014-05-09 11:17
225 查看
/*! * jquery.scrollLoading.js * by zhangxinxu http://www.zhangxinxu.com * 2010-11-19 v1.0 * 2012-01-13 v1.1 偏移值计算修改 position → offset * 2012-09-25 v1.2 增加滚动容器参数, 回调参数 */ (function($) { $.fn.scrollLoading = function(options) { var defaults = { attr: "data-url", container: $(window), callback: $.noop }; var params = $.extend({}, defaults, options || {}); params.cache = []; $(this).each(function() { var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]); //重组 var data = { obj: $(this), tag: node, url: url }; params.cache.push(data); }); var callback = function(call) { if ($.isFunction(params.callback)) { params.callback.call(call.get(0)); } }; //动态显示数据 var loading = function() { var contHeight = params.container.height(); if ($(window).get(0) === window) { contop = $(window).scrollTop(); } else { contop = params.container.offset().top; } $.each(params.cache, function(i, data) { var o = data.obj, tag = data.tag, url = data.url, post, posb; if (o) { post = o.offset().top - contop, post + o.height(); if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) { if (url) { //在浏览器窗口内 if (tag === "img") { //图片,改变src callback(o.attr("src", url)); } else { o.load(url, {}, function() { callback(o); }); } } else { // 无地址,直接触发回调 callback(o); } data.obj = null; } } }); }; //事件触发 //加载完毕即执行 loading(); //滚动执行 params.container.bind("scroll", loading); }; })(jQuery);
相关文章推荐
- jquery.scrollLoading.js内容(异…
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
- jquery.scrollLoading.js内容(异步加载图片)
- jquery.scrollLoading-min.js实现图片延迟加载
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
- 延迟加载图片的 jQuery 插件:LazyLoad.js及scrollLoading.js
- jquery.scrollLoading-min.js实现图片延迟加载
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载
- 【JavaScript】offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- jQuery滚动条插件 – jquery.slimscroll.js
- js处理局部scroll事件禁止外部scroll滚动解决办法,jquery.mousewheel.js处理时禁止办法说明
- 自定义滚动条样式-jquery.tinyscrollbar.min.js 插件
- jquery.scrollfollow.js 浏览器上下滚动(浮动)
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
- LazyLoad.js及scrollLoading.js
- 一个很好的滚动条插件jquery.slimscroll.js
- jquery.nicescroll.min.js滚动条使用方法
- LazyLoad.js及scrollLoading.js
- jquery插件scroll-loading实现的图片延迟加载