Wowchemy-hugo-modules: Lazy load portfolio widget images

[rodrigoalcarazdelaosa]

Feature Request

Is your feature request related to a problem? Please describe.
Right now if we have a portfolio widget very at the bottom of a widget page, the upper parts of the page will not load correctly until all the images of that specific portfolio widget have loaded, even if they don't need to be loaded, specially if filtering is active.

Describe the solution you'd like
Load only the necessary images that will be shown when we load the page, and leave the rest until they actually need to be loaded (basically when getting there and the corresponding filter is active).

Describe alternatives you've considered
No idea if this still works (it's quite old) but just in case: https://stackoverflow.com/questions/11337291/combining-jquery-isotope-and-lazy-load

[gcushen]

Isotope have also had a lazy loading request open for 3 years: https://github.com/metafizzy/isotope/issues/1352

[rodrigoalcarazdelaosa]

Isotope have also had a lazy loading request open for 3 years: metafizzy/isotope#1352

So they clearly need to stop being lazy and implement it already! 😂😂😂

[gcushen]

I'm keen to add lazy loading to Isotope. It probably requires an investigation of the current APIs/Docs for Isotope, Isotope Images Loaded Plugin, and the Lazy Loading library we use (and possibly also their code) to understand how lazy loading can be integrated without conflicts and breaking sites.

[rodrigoalcarazdelaosa]

Right now if we have a portfolio widget very at the bottom of a widget page, the upper parts of the page will not load correctly until all the images of that specific portfolio widget have loaded, even if they don't need to be loaded, specially if filtering is active.

Live example of a page _suffering_ this: https://rodrigoalcarazdelaosa.me/recursos-fisica-quimica/

[rodrigoalcarazdelaosa]

Right now if we have a portfolio widget very at the bottom of a widget page, the upper parts of the page will not load correctly until all the images of that specific portfolio widget have loaded, even if they don't need to be loaded, specially if filtering is active.

Live example of a page _suffering_ this: https://rodrigoalcarazdelaosa.me/recursos-fisica-quimica/

Huge performance increase thanks to 3a03b72. You're awesome @gcushen