Lazyloading as suggested in issue psolom#148 by @fabriceci

gmkll · Jun 30, 2017 · e8f717f · e8f717f
1 parent 3e133e7
commit e8f717f
Show file tree

Hide file tree

Showing 7 changed files with 691 additions and 7 deletions.
diff --git a/config/filemanager.config.default.json b/config/filemanager.config.default.json
@@ -64,6 +64,7 @@
     "viewer": {
         "absolutePath": true,
         "previewUrl": false,
+        "lazyLoad": false,
         "image": {
             "enabled": true,
             "showThumbs": true,

diff --git a/index.html b/index.html
@@ -135,7 +135,12 @@
 								<div class="item-background"></div>
 								<div class="item-content" data-bind="draggableView: koItem">
 									<div class="clip">
-										<img src="" data-bind="css: koItem.gridIconClass(), attr: {src: koItem.cdo.imageUrl, width: koItem.cdo.previewWidth}" />
+                    <!-- ko if: koItem.cdo.lazyload  -->
+										<img src="" data-bind="css: koItem.gridIconClass(), attr: {'data-original': koItem.cdo.imageUrl, width: koItem.cdo.previewWidth}" />
+                    <!-- /ko -->     
+                    <!-- ko if: !koItem.cdo.lazyload -->                    
+                    <img src="" data-bind="css: koItem.gridIconClass(), attr: {src: koItem.cdo.imageUrl, width: koItem.cdo.previewWidth}" />
+                    <!-- /ko -->                         
 									</div>
 									<p data-bind="text: koItem.rdo.attributes.name"></p>
 								</div>
@@ -412,9 +417,8 @@ <h1 data-bind="text: rdo().attributes.name, attr: {title: rdo().id}"></h1>
 		<script type="text/javascript" src="scripts/javascript-templates/js/tmpl.min.js"></script>
 		<script type="text/javascript" src="scripts/toast/lib/toast.min.js"></script>
 		<script type="text/javascript" src="scripts/purl/purl.min.js"></script>
-
 		<!-- Load filemanager script -->
-		<script type="text/javascript" src="scripts/filemanager.min.js"></script>
+		<script type="text/javascript" src="scripts/filemanager.js"></script>
 		<script type="text/javascript" src="config/filemanager.init.js"></script>
 
 		<!-- Start RichFilemanager plugin -->

diff --git a/scripts/filemanager.js b/scripts/filemanager.js
@@ -341,6 +341,9 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
         if(config.customScrollbar.enabled) {
             primary.push('/scripts/custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css');
             primary.push('/scripts/custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js');
+            if(config.viewer.lazyLoad) {
+                primary.push('/scripts/lazyload/lazyload.transpiled.js');
+            }
         }
 
         // add callback on loaded assets and inject primary ones
@@ -470,6 +473,7 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
                 fmModel.ddModel.makeDroppable(valueAccessor(), element);
 			}
 		};
+
 
         $wrapper.mousewheel(function(e) {
             if (!fmModel.ddModel.dragHelper) {
@@ -696,6 +700,9 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
                             var yIncrement = Math.abs(this.mcs.top) - Math.abs(this.yStartPosition);
                             $viewItems.selectable("repositionCssHelper", yIncrement, 0);
                         }
+                        if (config.viewer.lazyLoad) {
+                           fm.lazyload.main.handleScroll(); // use throttle 
+                        }
                     }
                 },
                 axis: "y",
@@ -1460,7 +1467,7 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
 
 			this.loadList = function(path) {
 				model.loadingView(true);
-
+        
 				var queryParams = {
 					mode: 'getfolder',
 					path: path
@@ -1476,9 +1483,31 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
 					cache: false,
 					success: function(response) {
                         if (response.data) {
+                            //model.itemsModel.objects( {} ); // empty old first
                             model.currentPath(path);
                             model.breadcrumbsModel.splitCurrent();
                             model.itemsModel.setList(response.data);
+                            if (config.customScrollbar.enabled && config.viewer.lazyLoad) {
+                              fm.lazyload = fm.lazyload || {};
+                              fm.lazyload.logElementEvent = function(eventName, element) {
+                                console.log(new Date().getTime(), eventName, element.getAttribute('data-original'));
+                              }
+                              fm.lazyload.logEvent  = function(eventName, elementsLeft) {
+                                console.log(new Date().getTime(), eventName, elementsLeft + " images left");
+                              }    
+                              fm.lazyload.main = new LazyLoad({
+                                  //container: document.getElementById('file-viewer'),
+                                  callback_load: function (element) {
+                                    fm.lazyload.logElementEvent("LOADED", element);
+                                  },
+                                  callback_set: function (element) {
+                                    fm.lazyload.logElementEvent("SET", element);
+                                  },
+                                  callback_processed: function(elementsLeft) {
+                                    fm.lazyload.logEvent("PROCESSED", elementsLeft);
+                                  }
+                              });
+                            }
                         }
 						handleAjaxResponseErrors(response);
 					},
@@ -1647,7 +1676,8 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
                 dimensions: resourceObject.attributes.width ? resourceObject.attributes.width + 'x' + resourceObject.attributes.height : null,
                 cssItemClass: (resourceObject.type === 'folder') ? 'directory' : 'file',
                 imageUrl: createImageUrl(resourceObject, true, true),
-                previewWidth: previewWidth
+                previewWidth: previewWidth,
+                lazyload: (config.customScrollbar.enabled && config.viewer.lazyLoad)? true: false
             };
             this.visible = ko.observable(true);
             this.selected = ko.observable(false);

diff --git a/scripts/filemanager.min.js b/scripts/filemanager.min.js