jquery.endless-scroll.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. /**
  2. * Endless Scroll plugin for jQuery
  3. *
  4. * v1.4.8
  5. *
  6. * Copyright (c) 2008 Fred Wu
  7. *
  8. * Dual licensed under the MIT and GPL licenses:
  9. * http://www.opensource.org/licenses/mit-license.php
  10. * http://www.gnu.org/licenses/gpl.html
  11. */
  12. /**
  13. * Usage:
  14. *
  15. * // using default options
  16. * $(document).endlessScroll();
  17. *
  18. * // using some custom options
  19. * $(document).endlessScroll({
  20. * fireOnce: false,
  21. * fireDelay: false,
  22. * loader: "<div class=\"loading\"><div>",
  23. * callback: function(){
  24. * alert("test");
  25. * }
  26. * });
  27. *
  28. * Configuration options:
  29. *
  30. * bottomPixels integer the number of pixels from the bottom of the page that triggers the event
  31. * fireOnce boolean only fire once until the execution of the current event is completed
  32. * fireDelay integer delay the subsequent firing, in milliseconds, 0 or false to disable delay
  33. * loader string the HTML to be displayed during loading
  34. * data string|function plain HTML data, can be either a string or a function that returns a string,
  35. * when passed as a function it accepts one argument: fire sequence (the number
  36. * of times the event triggered during the current page session)
  37. * insertAfter string jQuery selector syntax: where to put the loader as well as the plain HTML data
  38. * callback function callback function, accepts one argument: fire sequence (the number of times
  39. * the event triggered during the current page session)
  40. * resetCounter function resets the fire sequence counter if the function returns true, this function
  41. * could also perform hook actions since it is applied at the start of the event
  42. * ceaseFire function stops the event (no more endless scrolling) if the function returns true
  43. *
  44. * Usage tips:
  45. *
  46. * The plugin is more useful when used with the callback function, which can then make AJAX calls to retrieve content.
  47. * The fire sequence argument (for the callback function) is useful for 'pagination'-like features.
  48. */
  49. (function($){
  50. $.fn.endlessScroll = function(options) {
  51. var defaults = {
  52. bottomPixels: 50,
  53. fireOnce: true,
  54. fireDelay: 150,
  55. loader: "<br />Loading...<br />",
  56. data: "",
  57. insertAfter: "div:last",
  58. resetCounter: function() { return false; },
  59. callback: function() { return true; },
  60. ceaseFire: function() { return false; }
  61. };
  62. var options = $.extend({}, defaults, options);
  63. var firing = true;
  64. var fired = false;
  65. var fireSequence = 0;
  66. if (options.ceaseFire.apply(this) === true) {
  67. firing = false;
  68. }
  69. if (firing === true) {
  70. $(this).scroll(function() {
  71. if (options.ceaseFire.apply(this) === true) {
  72. firing = false;
  73. return; // Scroll will still get called, but nothing will happen
  74. }
  75. if (this == document || this == window) {
  76. var is_scrollable = $(document).height() - $(window).height() <= $(window).scrollTop() + options.bottomPixels;
  77. } else {
  78. // calculates the actual height of the scrolling container
  79. var inner_wrap = $(".endless_scroll_inner_wrap", this);
  80. if (inner_wrap.length == 0) {
  81. inner_wrap = $(this).wrapInner("<div class=\"endless_scroll_inner_wrap\" />").find(".endless_scroll_inner_wrap");
  82. }
  83. var is_scrollable = inner_wrap.length > 0 &&
  84. (inner_wrap.height() - $(this).height() <= $(this).scrollTop() + options.bottomPixels);
  85. }
  86. if (is_scrollable && (options.fireOnce == false || (options.fireOnce == true && fired != true))) {
  87. if (options.resetCounter.apply(this) === true) fireSequence = 0;
  88. fired = true;
  89. fireSequence++;
  90. $(options.insertAfter).after("<div id=\"endless_scroll_loader\">" + options.loader + "</div>");
  91. data = typeof options.data == 'function' ? options.data.apply(this, [fireSequence]) : options.data;
  92. if (data !== false) {
  93. $(options.insertAfter).after("<div id=\"endless_scroll_data\">" + data + "</div>");
  94. $("div#endless_scroll_data").hide().fadeIn();
  95. $("div#endless_scroll_data").removeAttr("id");
  96. options.callback.apply(this, [fireSequence]);
  97. if (options.fireDelay !== false || options.fireDelay !== 0) {
  98. $("body").after("<div id=\"endless_scroll_marker\"></div>");
  99. // slight delay for preventing event firing twice
  100. $("div#endless_scroll_marker").fadeTo(options.fireDelay, 1, function() {
  101. $(this).remove();
  102. fired = false;
  103. });
  104. }
  105. else {
  106. fired = false;
  107. }
  108. }
  109. $("div#endless_scroll_loader").remove();
  110. }
  111. });
  112. }
  113. };
  114. })(jQuery);