Dynamic load of large directories

[d2-d2]

Directory listings with thousands of files are not handled efficiently. Would it be possible to load part of such directory and then another one once window is scrolled? Example of big directory: http://quake.tdhack.com/demos/chtv_demos/

[jezikk82]

I think You can use lazy loading script (e.g.: http://www.appelsiini.net/projects/lazyload).

+1 for this option.

[fireglow]

+1, dynamic scrolling would be nice, but I'd gladly settle for pagination in a pinch ;)

[mbury]

Lazy load! +1 for this

[larsvilhuber]

+1.

[thedark1337]

+1 for this. I have a huge 800 image gallery and lazy loading would help a lot.

[lapsio]

+1 Slower server is dying while generating previews for 1k+ dirs and browser runs out of memory. For sure it'd help

[mkskarch]

+1 !!!

[kattjevfel]

Cannot +1 this enough, I simply cannot use this script due to it overloading my server and crashing web browsers.

[RomeSilvanus]

+1 for this

[bonny1992]

+1 absolutely

[jobenvil]

I need this as well. Thanks @lrsjng !

[da3dsoul]

+1

[lapsio]

Well actually it's not perfect either - i installed Pydio which features lazy loading and generating thumbnails here for big directiories is real pain in the ass... So it should be option, not mandatory. Or pls add option to manually generate all thumbnails via CLI on server.

[glubsy]

I think You can use lazy loading script (e.g.: http://www.appelsiini.net/projects/lazyload).

I tried to use it but failed, since I don't know javascript very well. Here's a (non-working) patch, I think it needs to use a promise somewhere to take into account the dynamically loaded items or something.

diff --git src/_h5ai/private/php/pages/page.tpl.pug src/_h5ai/private/php/pages/page.tpl.pug
index 9a7526b1..aaedb700 100644
--- src/_h5ai/private/php/pages/page.tpl.pug
+++ src/_h5ai/private/php/pages/page.tpl.pug
@@ -15,6 +15,7 @@ html(class='no-js', lang='en')
         link(rel='stylesheet', href!='<?= $public_href; ?>css/styles.css')
         <?php if (!$fallback_mode) { ?>
         script(src!='<?= $public_href; ?>js/scripts.js', data-module=module)
+        script(src!='https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js')
         <?php } ?>
         <?= $x_head_tags; ?>
 
diff --git src/_h5ai/public/js/lib/core/location.js src/_h5ai/public/js/lib/core/location.js
index 4cc7e8fd..863e9e84 100644
--- src/_h5ai/public/js/lib/core/location.js
+++ src/_h5ai/public/js/lib/core/location.js
@@ -140,6 +140,10 @@ const setLocation = (newAbsHref, keepBrowserUrl) => {
             item.isLoaded = true;
             notification.set();
             event.pub('location.changed', item);
+        }).then(() => {
+            let images = document.querySelectorAll(".item.file");
+            console.log("LAZY LOAD loaded: ", images);
+            lazyload(images);
         });
     }
 };

But even if I load lazyload manually in the console after getting the list of nodes to filter, it doesn't seem to work, something is probably missing.

[glubsy]

I have submitted #775 which adds pagination. I don't think a lazy load is possible considering there is sorting to take into account. That would not work if items are displayed "dynamically".