123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- // 当滚动条滚动到指定元素时,调用回调函数
- (function ($) {
- /**
- * @param mixed _config 可以是字符串的url;也可以是一个对象,目前允许的参数有:
- * {
- * url: ''// url
- * , upperBound //元素的上边界。默认为0,即当滚动元素到窗口可见时,才加载。如果指定upperBound为正值,则当元素离窗口可见upperBound像素时,就开始提前加载。
- * , lowerBound //元素的下边界。如果指定,则滚动条超出元素顶部+下边界后,不加载。用于防止用户一下把滚动条拉出元素范围,仍然加载。
- * }
- *
- * 当元素顶端与可见窗口的上边框对齐时,元素的 offset().top值与$(document).scrollTop()值相等。
- */
- var scrollLoad = function (_config, callback) {
- if (typeof(_config) == 'string') {
- var config = {
- url: _config
- }
- } else {
- var config = _config;
- }
- config.upperBound = config.upperBound || 0;
- var _this = this;
- var jq = $(_this);
- var cb_scroll = function () {
- if (jq.size() == 0) {
- return;
- }
- var scrollTop = $(document).scrollTop();
- var canLoad = false;// 用于标识能否加载
- if (config.lowerBound) {
- if (scrollTop >= (jq.offset().top - $(window).height() - config.upperBound)
- && (scrollTop < (jq.offset().top + config.lowerBound))
- ) {
- canLoad = true;
- }
- } else {
- canLoad = scrollTop >= (jq.offset().top - $(window).height() - config.upperBound);
- }
- if (canLoad) {
- // 取消滚动事件的绑定,不然会发出一系列的回调
- $(window).unbind('scroll', cb_scroll);
- if (typeof(callback) == 'function') {
- callback.call(_this, _config);// 把原生输入参数传递给回调函数
- }
- }
- };
- // 绑定滚动事件
- $(window).bind('scroll', cb_scroll);
- };
- // 扩展到html元素
- $.fn.extend({
- scrollLoad: scrollLoad
- });
- })(jQuery);
|