Changeset 29312

Timestamp:

07/27/2014 05:57:25 PM (10 years ago)

Author:

ocean90

Message:

Media Grid: Improve lazy loading.

props kovshenin.
see #24716.

Location:

trunk/src/wp-includes/js

Files:

• media-grid.js (modified) (1 diff)
• media-views.js (modified) (5 diffs)

trunk/src/wp-includes/js/media-grid.js

@@ -207 +207 @@
                 suggestedHeight: state.get('suggestedHeight'),
 
-                AttachmentView: state.get('AttachmentView')
+                AttachmentView: state.get('AttachmentView'),
+
+                scrollElement: document
             });
         }

trunk/src/wp-includes/js/media-views.js

@@ -5202 +5202 @@
         cssTemplate: media.template('attachments-css'),
 
-        events: {
-            'scroll': 'scroll'
-        },
-
         initialize: function() {
             this.el.id = _.uniqueId('__attachments-view-');
@@ -5236 +5232 @@
             this.collection.on( 'reset', this.render, this );
 
-            // Throttle the scroll handler.
+            // Throttle the scroll handler and bind this.
             this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
+
+            this.options.scrollElement = this.options.scrollElement || this.el;
+            $( this.options.scrollElement ).on( 'scroll', this.scroll );
 
             this.initSortable();
@@ -5407 +5406 @@
         scroll: function() {
             var view = this,
+                el = this.options.scrollElement,
+                scrollTop = el.scrollTop,
                 toolbar;
 
-            if ( ! this.$el.is(':visible') || ! this.collection.hasMore() ) {
+            // The scroll event occurs on the document, but the element
+            // that should be checked is the document body.
+            if ( el == document ) {
+                el = document.body;
+                scrollTop = $(document).scrollTop();
+            }
+
+            if ( ! $(el).is(':visible') || ! this.collection.hasMore() ) {
                 return;
             }
@@ -5416 +5424 @@
 
             // Show the spinner only if we are close to the bottom.
-            if ( this.el.scrollHeight - ( this.el.scrollTop + this.el.clientHeight ) < this.el.clientHeight / 3 ) {
+            if ( el.scrollHeight - ( scrollTop + el.clientHeight ) < el.clientHeight / 3 ) {
                 toolbar.get('spinner').show();
             }
 
-            if ( this.el.scrollHeight < this.el.scrollTop + ( this.el.clientHeight * this.options.refreshThreshold ) ) {
+            if ( el.scrollHeight < scrollTop + ( el.clientHeight * this.options.refreshThreshold ) ) {
                 this.collection.more().done(function() {
                     view.scroll();
@@ -5860 +5868 @@
                 model:                this.model,
                 sortable:             this.options.sortable,
+                scrollElement:        this.options.scrollElement,
 
                 // The single `Attachment` view to be used in the `Attachments` view.