|
| 1 | +function infiniscroll(el, options) { |
| 2 | + this.el = el; |
| 3 | + this.options = Object.assign({ |
| 4 | + navSelector: '.pagination', |
| 5 | + nextSelector: '.pagination a.next', |
| 6 | + loadingSelector: '.loading', |
| 7 | + pageFragment: '.ajax-append', |
| 8 | + scrollBuffer: 200, |
| 9 | + scrollOnLoad: true, |
| 10 | + scrollOnLoadDistance: 200, |
| 11 | + scrollOnLoadSpeed: 500, |
| 12 | + onInit: function () {}, |
| 13 | + beforeContentLoaded: function (link) {}, |
| 14 | + afterContentLoaded: function (html) {}, |
| 15 | + }, options); |
| 16 | + this._isLoading = false; |
| 17 | + this._nextLink = null; |
| 18 | + this._endReached = false; |
| 19 | + this.init(); |
| 20 | +} |
| 21 | + |
| 22 | +infiniscroll.prototype = { |
| 23 | + init: function () { |
| 24 | + var self = this; |
| 25 | + document.querySelector(this.options.navSelector).style.display = 'none'; |
| 26 | + window.addEventListener('scroll', function () { |
| 27 | + self.doScroll.apply(self); |
| 28 | + }); |
| 29 | + this.options.onInit.call(this); |
| 30 | + }, |
| 31 | + doScroll: function () { |
| 32 | + if (this._isLoading) return; |
| 33 | + if (window.scrollY >= document.body.scrollHeight - window.innerHeight - this.options.scrollBuffer) { |
| 34 | + this._isLoading = true; |
| 35 | + this._nextLink || (this._nextLink = document.querySelector(this.options.nextSelector)); |
| 36 | + if (!this._endReached) { |
| 37 | + this.options.beforeContentLoaded.call(this, this._nextLink); |
| 38 | + var loadingEl = document.querySelector(this.options.loadingSelector); |
| 39 | + if (loadingEl) loadingEl.style.display = 'block'; |
| 40 | + var self = this; |
| 41 | + var xhr = new XMLHttpRequest(); |
| 42 | + xhr.open('GET', this._nextLink.getAttribute('href')); |
| 43 | + xhr.onload = function () { |
| 44 | + var frag = document.createRange().createContextualFragment(xhr.response), |
| 45 | + content = frag.querySelector(self.options.pageFragment), |
| 46 | + s = false; |
| 47 | + self.options.scrollOnLoad && window.scrollY === document.body.scrollHeight - window.innerHeight && (s = true); |
| 48 | + content.querySelector(self.options.navSelector).style.display = 'none'; |
| 49 | + self._nextLink = content.querySelector(self.options.nextSelector); |
| 50 | + if (loadingEl) loadingEl.style.display = 'none'; |
| 51 | + self.el.appendChild(content); |
| 52 | + s && window.scrollTo(0, window.scrollY + self.options.scrollOnLoadDistance); |
| 53 | + self._isLoading = false; |
| 54 | + self.options.afterContentLoaded.call(self, content); |
| 55 | + if (!self._nextLink) self._endReached = true; // Stop infinite loop if no more pages to load |
| 56 | + }; |
| 57 | + xhr.send(); |
| 58 | + } else { |
| 59 | + this._endReached = true; // Stop infinite loop if no more pages to load |
| 60 | + } |
| 61 | + } |
| 62 | + } |
| 63 | +}; |
| 64 | + |
| 65 | +var el = document.querySelector('.ajax-append'); |
| 66 | +if (el) { |
| 67 | + new infiniscroll(el, { |
| 68 | + navSelector: '.pagination', |
| 69 | + nextSelector: '.pagination a.next', |
| 70 | + loadingSelector: '.loading', |
| 71 | + pageFragment: '.ajax-append', |
| 72 | + scrollBuffer: 200, |
| 73 | + scrollOnLoad: true, |
| 74 | + scrollOnLoadDistance: 200, |
| 75 | + scrollOnLoadSpeed: 500, |
| 76 | + onInit: function () {}, |
| 77 | + beforeContentLoaded: function (link) {}, |
| 78 | + afterContentLoaded: function (html) {} |
| 79 | + }); |
| 80 | +} |
0 commit comments