mfg92/hugo-shortcode-gallery

preview not revealing thumbnail on scroll

Closed this issue · 4 comments

rawwerks commented

(first off - i love this tool! thank you so much for making and maintaining it.)

any idea what might be behind this behavior?

basically - the portion of the gallery that is offscreen does not un-blur after scrolling down:

trim_480.mov

i can force the final row to unblur by:

  • first scrolling down the page, then hitting refresh (only works on localhost), or:
  • scrolling down, then changing the browser zoom (works on localhost or the live website)

i was able to reproduce this behavior on OS X Firefox and Safari

the problem doesn't seem to be there on mobile (where the gallery is forced into a single vertical column)

here's the code, which is almost exactly your example:

{{< gallery match="images/*" sortOrder="desc" rowHeight="300" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=false previewType="blur" embedPreview=true loadJQuery=true >}}

(in case useful, here is the page in question: https://raw.works/dalle-3-can-almost-spell/)

mfg92 commented

My first guess is that Cloudflares rocket loader is somehow interfering with jQuery lazy (which is used by hugo-shortcode-gallery to lazily load images). Can you check if the problem still occurs when the site is not using rocket loader?

rawwerks commented

i should have been more clear above, i'm having the same behavior with hugo server on localhost:
image

(i did check without rocketloader just to see, but that didn't do anything.)

mfg92 commented

I played a little with the website and came up with these results:

When preventing bundle.min.css to be loaded, lazy loading works correctly. From this it can be concluded that the other JS libraries do not sabotage lazy loading.

The bug is caused by the interaction of the layout and jquery lazy. Debugging this without having access to the code is quite difficult. Furthermore I don't know the inner details of jQuery Lazy.

To get to the bottom of the problem I would proceed as follows:

  1. Include the uncompressed version of jquery.lazy.js in the hugo-shortcode-gallery shortcode. To do that, remove ".min" from this line https://github.com/mfg92/hugo-shortcode-gallery/blob/master/layouts/shortcodes/gallery.html#L55
  2. Set a few breakpoints in jquery.lazy.js in your browser and see where the problem is: is it because the scroll event is not triggered, does the code that determines whether an element will soon be visible not work, etc

I wish you good luck with it, if you have come to a result I would be happy about a pull request.

mfg92 commented

Due to inactivity and because I cannot resolve this issue without further input, I will close this issue.