Album with hundreds of thumbnails crash Safari on iOS devices

[thomasdn]

Hi, A gallery with hundreds of images seem to crash Safari on iOS. Since all browsers on iOS internally use Safari for rendering, this means that effectively, iOS users (iPhones, iPads, etc) are not able to access Sigal albums with hundreds of images in them.

I have not been able to find the exact number of thumbnails that causes this to occur. Indeed, it does not seem to be a specific number. It seems the actual images matter. So maybe it is relating to some memory/buffer size.

It seems to me that the reason this happens is that Sigal's gallaria uses its own custom JS code to implement lazy loading of thumbnails. My hypothesis is that this lazy loading code builds up some huge javascript object that causes Safari to run into some memory limit and the page crashes.

I think the custom JS implementation of lazy loading could be omitted entirely and replaced by built in HTML features for lazy loading, namely:

<img src="image.jpg" alt="foo" loading="lazy" />

Would it be feasible to change this in Sigal's gallaria?

[thomasdn]

I have produced a simple example gallery here that causes the page Safari on iPhone to crash. I have tested this on at least iPhone 8, iPhone 12, iPhone 13.

URL is: http://129.151.214.239/tmp/1/sigal/ (I have changed to actual original pictures in this gallery with simple placeholder images. But the crash still occurs even though these images are very small)

Steps to reproduce: Open the url http://129.151.214.239/tmp/1/sigal/ on an iPhone.

I have attached a tar.gz with the example gallery in it. This is just a static html gallery that can be opened locally on a webserver. (e.g. start a python webserver, etc. in the folder)

sigal-crash-safari-on-iphone-example.tar.gz

[saimn]

No sigal is using Galleria's API for lazy loading (https://galleriajs.github.io/docs/api/methods.html#lazyloadchunks-size-delay). Maybe there is a bug somewhere, maybe it was fixed on Galleria's side, maybe not. Actually last release of galleria is from 2019, and this is the one we use ....

[thomasdn]

Yeah, I think the problem is that Galleria implements their own Lazy loading instead of using the built in HTML5 loading="lazy" attribute. However, as you mention, Galleria seems to be abandoned (latest release is from 2019). So I was hoping it would be possible to fix this in Sigal.

[rafalkrupinski]

What do you mean by lazy loading? Looking at the developer console, all images are fetched eagerly (firefox/linux)

[thomasdn]

What do you mean by lazy loading? Looking at the developer console, all images are fetched eagerly (firefox/linux)

That's odd. I just did a test in Firefox. So, I guess you're right. It might not be lazy loading at all. However, something seems to be loading the images using javascript in a different way than what native html/css would do.

This is how I did my test:

When I load a gallery album with hundreds of images in it while having developer console opened on the Network tab, this is what I see:

It seems all the images are requested eagerly from the server in "batches" as indicated by the arrows. While this happens, some kind of small progress-bar is shown to the user.

But even though they are requested immediately, they are not loaded/shown immediately. Instead they seem to be loaded into the thumbnail view using some "spinning" place holder effect. It looks like this:

This also means it takes fairly long time before you can actually see the thumbnails if you open a large album and immediately scroll to the bottom.

I guess you are exactly right that what sigal is doing is not lazy loading at all. It just takes very long time which caused me to believe it was lazy loading.

Nonetheless, it seems to be this behavior that is causing Safari to crash on mobile devices. I suppose it is hitting some memory limit due to the javascript probably loading all the images into an array or something like that. I am not sure and I haven't looked into the javascript as I lack the experience/skills to locate and fix the bug.

[saimn]

this galleria theme (folio) displays all thumbnails in the page so maybe try another galleria theme ? it seems thumbnails are (all or only visible ones?) loaded when page is loaded, the lazy loading by chunks mentioned above is only for images, not thumbnails.

[rafalkrupinski]

all images are fetched, at least on the page mentioned in in https://github.com/saimn/sigal/issues/497#issuecomment-1738936048

[thomasdn]

this galleria theme (folio) displays all thumbnails in the page so maybe try another galleria theme ? it seems thumbnails are (all or only visible ones?) loaded when page is loaded, the lazy loading by chunks mentioned above is only for images, not thumbnails.

Am I understanding this correctly, that this bug (Safari crashing) is caused by the Galleria theme. And the Galleria theme is not updated since 2019 - perhaps the project is abandoned?

Should I open a ticket on the Galleria project instead?

[saimn]

Galleria is unmaintained (last commit from 2020) and I'm not aware of a fork that would be community maintained.

[GlowingScrewdriver]

I encountered a similar issue. I'm not using Galleria, and my browser didn't crash, but it is messy to load albums containing a lot of photos. And this is down to the fact that the browser has to complete lot of requests before the webpage becomes stable — until then there are scroll jumps and missing thumbnails.

Is it within Sigal's scope to introduce a feature to split an album into pages? Similar to how a search engine will split search results across pages, instead of rendering all results on a single page.

[thomasdn]

Would it be feasible to have a minimal theme included with Sigal that the user could then easily expand on? Especially since Gallaria is abandoned.

[saimn]

Is it within Sigal's scope to introduce a feature to split an album into pages? Similar to how a search engine will split search results across pages, instead of rendering all results on a single page.

Yes adding a pagination feature could be done.

Would it be feasible to have a minimal theme included with Sigal that the user could then easily expand on? Especially since Gallaria is abandoned.

A minimal theme (pure HTML) could also be done, would be a good idea but it's not clear that it could easily reused with any javascript library since they often need a specific HTML structure.