Two or three things about browser native support for lazyload images

After looking at the WordPress update log, I found that lazy-loading Function. I was curious about how this function was implemented. After checking, I found that the browser already natively supports lazy loading of lazyload.

cause

The effect of lazy loading is that this media resource will be loaded only when the window slides to this position to save network traffic.

The principle of most plug-ins: add custom attributes to save the real media resource path. When the element is visible, change the src address to the real address.

In the WordPress update log, I found this line:

In WordPress 5.5, images wait to load until they are just about to scroll into view. The technical term is lazy loading.

I checked the lazy loading of WordPress, and found that it did not introduce third-party plug-ins, nor modify the media file link of the tag, but only added the img tag loading="lazy" 。

About the loading attribute

Web.dev says:

Chrome and Firefox both support native browser lazy-loading with the loading attribute. This attribute can be added to <img> elements, and also to <iframe> elements. A value of lazy tells the browser to load the image immediately if it is in the viewport, and to fetch other images when the user scrolls near them.

On the MDN, img's laoding attribute is described as follows:

• loading
  Indicates how the browser should load the image:
  • eager: Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).
  • lazy: Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it’s reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases.

The compatibility list of MDN browsers shows that everyone supports this attribute except Fruit Family, IE and some lower version browsers.

I'm on Mars.

Trigger time of WordPress

When an img tag has both width And height Property, the filter of WordPress will add loading="lazy" 。

for instance:

 <img src="//up-free-imgs.azimiao.com/wp-content/uploads/2020/09/FlightSimulator_4.jpg"> <img src="//up-free-imgs.azimiao.com/wp-content/uploads/2020/09/FlightSimulator_4.jpg" width="100%"> <img src="//up-free-imgs.azimiao.com/wp-content/uploads/2020/09/FlightSimulator_4.jpg" width="100%" height="auto">

After being processed by the new version of WordPress:

 <!--  output --> <img src="//pic-cdn.azimiao.com/wp-content/uploads/2020/09/FlightSimulator_4.jpg"> <img src="//pic-cdn.azimiao.com/wp-content/uploads/2020/09/FlightSimulator_4.jpg" width="100%"> <img loading="lazy" src="//pic-cdn.azimiao.com/wp-content/uploads/2020/09/FlightSimulator_4.jpg" width="100%" height="auto">

advantage

The browser natively supports this attribute, which perfectly solves some people's dilemma: will Baidu run my js plug-in code to capture real images?

Now with it, the path of the media file will not change, so you don't have to worry about SEO.

Have you got a spark?