jquery.scrollLoad.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. // 当滚动条滚动到指定元素时,调用回调函数
  2. (function ($) {
  3. /**
  4. * @param mixed _config 可以是字符串的url;也可以是一个对象,目前允许的参数有:
  5. * {
  6. * url: ''// url
  7. * , upperBound //元素的上边界。默认为0,即当滚动元素到窗口可见时,才加载。如果指定upperBound为正值,则当元素离窗口可见upperBound像素时,就开始提前加载。
  8. * , lowerBound //元素的下边界。如果指定,则滚动条超出元素顶部+下边界后,不加载。用于防止用户一下把滚动条拉出元素范围,仍然加载。
  9. * }
  10. *
  11. * 当元素顶端与可见窗口的上边框对齐时,元素的 offset().top值与$(document).scrollTop()值相等。
  12. */
  13. var scrollLoad = function (_config, callback) {
  14. if (typeof(_config) == 'string') {
  15. var config = {
  16. url: _config
  17. }
  18. } else {
  19. var config = _config;
  20. }
  21. config.upperBound = config.upperBound || 0;
  22. var _this = this;
  23. var jq = $(_this);
  24. var cb_scroll = function () {
  25. if (jq.size() == 0) {
  26. return;
  27. }
  28. var scrollTop = $(document).scrollTop();
  29. var canLoad = false;// 用于标识能否加载
  30. if (config.lowerBound) {
  31. if (scrollTop >= (jq.offset().top - $(window).height() - config.upperBound)
  32. && (scrollTop < (jq.offset().top + config.lowerBound))
  33. ) {
  34. canLoad = true;
  35. }
  36. } else {
  37. canLoad = scrollTop >= (jq.offset().top - $(window).height() - config.upperBound);
  38. }
  39. if (canLoad) {
  40. // 取消滚动事件的绑定,不然会发出一系列的回调
  41. $(window).unbind('scroll', cb_scroll);
  42. if (typeof(callback) == 'function') {
  43. callback.call(_this, _config);// 把原生输入参数传递给回调函数
  44. }
  45. }
  46. };
  47. // 绑定滚动事件
  48. $(window).bind('scroll', cb_scroll);
  49. };
  50. // 扩展到html元素
  51. $.fn.extend({
  52. scrollLoad: scrollLoad
  53. });
  54. })(jQuery);