In the past, optimizing a site with lots of images relied on JAVASCRIPT logic or related plugins, such as lazy loading techniques. Now, at least in the near future, Chrome 75 will add native lazy loading.

Go straight to work

Of course, you can also get started by typing browser://flags/#enable-lazy-image-loading in the browser TAB. Go to the enable-lazy-image-loading TAB and open it. It can be used after restart.

Under the standard

If you want to know more about loading, you can use the following three properties to define the browser loading behavior:

  • Lazy: Uses lazy loading when the screen is scrolled near an image
  • Eager: Loads the image immediately
  • Auto: this parameter is determined by the browser

For a discussion of lazy loading, you can explore this issue further.

Start using the new code

You may want to implement this feature in your project right away, but don’t forget that it’s experimental, at least for now, so do some feature checking and work with unsupported browsers:

This is not enough. To prevent your Image tag from being loaded immediately by a browser that does not support loading, you need to replace the SRC attribute with another one. You also need to consider browsers that do not support JS, such as this:

Discard non-native lazy loading?

Discard non-native lazy loading? The answer is no in any case.

If the browser of the future supports lazy loading and the standards remain the same, it will only be suitable for simple web browsing scenarios, such as pages with mixed text and images such as Nuggets. For special scenarios, such as the ones described in this article, we still need to write a lot of native JS logic on demand. Until the nature of the problem is solved, any optimization in the experience is to optimize the performance of one part of the scene and give up the performance of another (or even negative optimization).

The last

The code image in this article is made of Carbon, and the highlight of the code for digging gold is really… There is no way ~~

References

Native image lazy-loading for the web!

Lazyload images and iframes

Lazy loading of pictures and videos

Extreme performance – image progressive display and lazy loading