4

I want to defer the loading of images in an HTML file until after all other assets have loaded or for a set amount of time. I would like to do this without JS.

I already use a deferred image loading technique that uses JS in our web app. However, a version of this app runs without JS and I'd like to have the same functionality if possible. I posted this in the hopes there may be some little known HTML5 attribute I can use for this. Any workaround are welcome.

Load priotity

If possible, it would be good to break up the image loading into blocks. I'm ok even if it's all just one block as well.

  1. All HTML / CSS
  2. Image block
  3. Image block

Note : I've already looked into having lazy loading only for the JS app and having the image load right away for my pure HTML version (as described here), that's my fallback.

Community
  • 1
  • 1
JohnP
  • 49,507
  • 13
  • 108
  • 140

1 Answers1

2

If you are targeting the Chrome browser, chromium has introduced a native image lazy loading so that means you don't need to install any further 3rd party library for this.

Using native image lazy loading, you should add loading attribute in the img html tag like this : 

<img src="..." loading="lazy" width="200" height="200">

Also make sure that you have the latest version of Chrome browser installed.

For further details please go through this reference: https://web.dev/native-lazy-loading#image-loading

Hopefully it could be helpful.

Muhammad Ahsan
  • 86
  • 6