Google Chrome v75 will support native image lazy-loading feature

A blog published by Google Chrome development engineers shows that Google Chrome has begun testing the native image lazy-loading properties in the Canary version. Lazy loading means that only the images that appear on the screen will be loaded when the user opens the webpage, and the rest of the images will be loaded after the page is scrolled to the corresponding location. The intuitive feeling of lazy loading is that the speed of page loading is significantly improved because it is not necessary to load all the resources of the page at once. Lazy loading for websites and developers also helps reduce server bandwidth overhead and avoids wasting bandwidth traffic resources when loading images that are not displayed.

At present, many developers have used JavaScript scripts for lazy loading, but Google Chrome has started to support lazy loading technology natively. The developer only needs to mark the lazy loading in the image property, and the browser will load according to the screen scrolling and display when reading the resource. Lazy loading properties support images and videos in iframe nested frames, as detailed in the sample code provided by Google Chrome engineers.

The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values:

  • lazy: is a good candidate for lazy loading.
  • eager: is not a good candidate for lazy loading. Load right away.
  • auto: browser will determine whether or not to lazily load.