liwenyip / hugo-easy-gallery

Automagical css image gallery in Hugo using shortcodes, with optional lightbox/carousel gadget using PhotoSwipe and jQuery.
MIT License
577 stars 111 forks source link

is there a lazy loading feature ? #62

Closed salama135 closed 3 years ago

ganeshh123 commented 3 years ago

I've found a small workaround for now. It doesn't implement lazy loading, but it reduces the load time for large galleries. The large load comes from loading all the images to measure their height and width for Photoswipe.

If you have thumbnail images, you can switch the code to use the thumbnail's dimensions to figure out an aspect ratio, set a fixed large enough width and calculate a height from it.

Lines 47-60 of load-photoswipe.js

// load the image to check its dimensions
// update the item as soon as w and h are known (check every 30ms)
var img = new Image(); 
img.src = $img.attr('src');
var wait = setInterval(function() {
var w = img.naturalWidth,
    h = img.naturalHeight;
if (w && h) {
    clearInterval(wait);
    ratio = w/h
    item.w = 1920;
    item.h = 1920/ratio;
}
}, 30);
iranzo commented 2 years ago

There's a library call b-lazy that allows to do lazy loading of almost anything: https://dinbror.dk/blog/blazy/