Issue: HTML5 spec lazy-loading that sets correct aspect ratios..

Issue Tools
- View Changes

October 11, 2023 1:25 AM

mazzly

Junior Member

HTML5 spec lazy-loading that sets correct aspect ratios..

Related to https://www.vaultwiki.org/issues/6258/ that was more or less ignored...

Re-raising this because "above the fold" images don't always load with the current lazy-loading implementation (when images are not in cache, on the second refresh they load...)

Also, doing lazy-loading with JS is prone to errors, and browsers will actually handle these things better themselves...

------

We should have an option for lazy loading that follows the HTML5 spec without using JS... Inserting width and height with JS is not a good idea...

loading="lazy" is supported by all modern browsers, and recommended... https://web.dev/browser-level-image-lazy-loading/

the CSS "aspect-ratio" is also supported, and allows us to get the correct aspect ratio while still allowing us to limit CSS height/width attributes. https://developer.mozilla.org/en-US/...S/aspect-ratio

With the proposed "HTML5-spec lazy loading"-option selected, the following should be done for all images Note: This all happens on the server side :

- Set loading="lazy"
- Set width="<X>"
- Set height="<Y>"
- Set style="aspect-ratio: <X>/<Y>"

With this, the aspect ratio and image sizes will flow correctly without having FOUC or similar jumpiness, and browsers will handle the lazy-loading part.

If I then want to set specific width/height limitations, I can do so in the CSS, and the content will flow correctly, provided I set either the width or height attr to "auto"...

Can we please get this prioritized? I feel like this is such a low-hanging fruit to actually get best-practice lazy-loading implemented

Issue Details

Issue Number 6385

Issue Type Feature

Project VaultWiki 4.x Series

Category Attachments

Status Accepted

Priority 3 - Loss of Functionality

Suggested Version Unknown

Implemented Version (none)

Milestone (none)

Software DependencyAny

License TypePaid

Votes for this feature 0

Votes against this feature 0

Attachments 0

Assigned Users (none)

Tags xenforo

October 11, 2023 1:33 AM

mazzly

Junior Member

And if you're not willing to implement this, can you at least provide an option to include `data-width="<X>"` & `data-height="<Y>"` attributes to the images so that I can manually write an add-on that does this with some basic HTML parsing...

Reply
October 13, 2023 10:11 AM

pegasus

VaultWiki Team

Are you talking about images using the FILE BB-Code, when VaultWiki's lazy-loader is disabled?
My impression was that this was handled in a previous version: https://www.vaultwiki.org/issues/6080/
But after closer inspection, I see those are not. I wonder if there is a specific reason. It may be a bug.

If there are specific other images (using the img HTML tag) that are not lazy, please specify. For those other uses, it depends. Specifically, wiki page icon images come to mind... As mentioned in a response in the link above and confirmed by Google's own documentation, native browser lazy-loading is unable to handle CSS images which makes up a lot of VaultWiki's images. In these cases, JS loading is the only means to lazy-load.

Reply
October 13, 2023 10:20 AM

mazzly

Junior Member

Well, generally I want an option that doesn't use any JS lazy-loading, and also inserts the correct width & height params to all <img> elements, as that is the recommended way (also included in the https://web.dev/articles/browser-lev...ion_attributes that you linked in the other thread)

I manually edited src/addons/vw/vw/_core/model/parser/handle/vw.php to include height="maxy" and width="maxx" and then turned off the lazy-loading option. I also have my own addon where I modified the vault wiki outputte <img> to all have loading="lazy" and it works well without any reflows, and the images actually load as they should when scrolling...

Reply
October 13, 2023 10:31 AM

mazzly

Junior Member

correct width="" and height="" in the above post, meaning the "full image size" dimensions, so that the browser can calculate the aspect ratios, the actual rendered size will then ofc be limited by the parent divs and CSS rules, but it will automagically take up the correct space without any CSS-background or other magical JS workarounds

the loading="lazy" instructs the browser to load what is "in the view", or about to come into the view

I don't actually think the style="aspect-ration <X>/<Y>" would be needed, but it doesn't hurt to have it for browsers that might not automatically calculate the width/height to get the ratio

Reply
October 16, 2023 1:45 AM

mazzly

Junior Member

I also noticed that e.g. the images with class "vw-content-list-icon" (i.e. images in "list of pages") also do some JS-magic lazy-loading, even though I have turned off lazy-loading...
And even when the images are in the cache, I still see a FOUC effect (probably loading spinner temporarily showing) before the image is taken from the cache when scrolling...

I would also want those to actually insert image elements (with loading="lazy" set) instead of doing CSS background hacks... I've noticed on mobile that those keep on spinning and never even load (even when trying to scroll), this might be fixed already in the latest version, will have to verify once I upgrade later today

The native lazy-loading with loading="lazy" is also better at predicting (probably since they have tons of user data) when it needs to load the image, compared to the JS that seems to load it quite late when scrolling a page... Another plus would be that it won't try to show the loading-spinner when loading the image from cache (FOUC)

Reply
October 16, 2023 2:12 PM

pegasus

VaultWiki Team

Changing the vw-content-list-icons into images would be a pretty big change for a maintenance release (there are several things under the hood in this element that would need to be reworked and there would be a lot of style changes), so that part will have to be deferred for a bigger release.

However, I think there are a number of bugs you've outlined that can be addressed:
- vw-content-list-icon still using JS lazy-loading even though that admin option is disabled
- FILE images not using the loading="lazy" attribute even after 4.1.3, when those images should qualify.

Reply
October 23, 2023 12:16 PM
pegasus

VaultWiki Team
Fixed in the next release:

Code:

Fixed Bug: [note#35253] FILE images not HTML5-lazy while lazy loader disabled [since: 4.1.3] [lite: no] Fixed Bug: [note#35253] wiki icons still lazy load while lazy loader disabled [since: 4.1.3] [lite: no]

So when the admin option Lazy load wiki attachment images = No, the browser behavior will now be used. In this case, width and height attributes are added by the server. In all cases, the style aspect-ratio is added.
Reply

+ Reply

All times are GMT -4. The time now is 7:01 PM.

This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Learn more… Accept Remind me later

Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

Issue: HTML5 spec lazy-loading that sets correct aspect ratios..

Issue Tools