Support for Native Lazy Loading of Images

[angusmcb]

Native lazy loading of images is now supported in chrome and firefox.
https://caniuse.com/#feat=loading-lazy-attr

Would it be possible to support this in Grav? Possibly even setting it as the default for all images inserted through markdown?

Thanks!

[rhukster]

This has been added to latest 1.7 branch.

[juliendude]

Pretty cool this simple yet powerful browser native feature has been added as a config in Grav.
Sometimes, something little and simple can go a long way :)

[angusmcb]

That is great :-)

Another related suggestion is to include the height="" and width="" properties, so there is no possibility of jank when lazy loading (I understand it also stops jank even when not lazy loading).

I realise that might be more difficult, as you would need to know the image file width and height.

[01Kuzma]

That's strange. I've upgraded to 1.7 RC16 and Admin Panel v1.9.16, but these lines are missing in blueprints/config/system.yaml:

            images.defaults.loading:
              type: select
              size: small
              label: PLUGIN_ADMIN.IMAGES_LOADING
              help: PLUGIN_ADMIN.IMAGES_LOADING_HELP
              highlight: auto
              options:
                auto: Auto
                lazy: Lazy
                eager: Eager

[mahagr]

I just checked and the lines are there:
https://github.com/getgrav/grav/blob/1.7/system/blueprints/config/system.yaml#L1135-L1144

PS. Update your admin plugin to 1.10 as well!