Loading images eager for above the fold images

[felixranesberger]

My image variants are generated on the fly, this means that on some occasions the image might take some time to be processed and sent to the user.

Because of this I implemented the Unlazy thumbhash functionality.

This works great, but for images which are directly visible in the viewport, I have to remove the loading="lazy" attribute,
because Google Pagespeed marks this as an issue.

Is it possible to load the images with loading="eager" while still retaining the "blurry image placeholder" effect?

import { lazyLoad } from '@unlazy/core';

lazyLoad('img[loading="lazy"], img[loading="eager"]');

[johannschopplich]

Sure, this should be working. In the end, any valid selector will work. It will be passed into this for..of loop:

unlazy/packages/core/src/lazyLoad.ts

Line 26 in 4adca71

for (const image of toElementArray<T>(selectorsOrElements)) {

Have you tested this? Can you provide more information?

[felixranesberger]

I'm sorry, for some reason my code was not working on my local machine, but ended up working on my develop instance.

Thanks for your library and help!
Have a nice day 🌻

[johannschopplich]

I haven't tested it myself before. So, glad to hear that it works as intended and anticipated. 🙂