Browser IMG Image Native Lazy Loading Loading=”lazy” Practice Guide

1. Lazy loading Chrome 76 supports it

At the beginning of the year, I heard that the IMG image and IFRAME framework of the Chrome browser will support the native lazy loading feature and use the loading="lazy"syntax.

Hope for the stars and moon, finally, the grid in the compatibility table is green, green is really good, Chrome76 supports it!

Image native lazy loading compatibility

I took a look at my browser, hehe, it has been upgraded to the latest version, the compatibility is enough, you can play:

My Chrome browser version

2. Research on lazy loading characteristics

If you want an image to be loaded when it is close to the browser window, the following code will do:

<img src="./example.jpg" loading="lazy" alt="zhangxinxu">

Lazy loading function can be realized without any other JavaScript code.

Seeing is believing, you can click here: image native lazy loading demo

The demo page has 30 vertical display pictures of 180*180.

We open the console, refresh the page, we can see that 17 pictures are loaded, and the remaining 13 are not loaded.

17 resources loaded

I actually loaded 17 pictures, which is far beyond my estimation!

Because according to the current layout of the demo page, only 4 pictures can be displayed on one screen. Now 17 pictures are loaded in one go. Could it be that the picture materials within 4 screen height are loaded?

So I reduced the height of the screen display on the page and refreshed it. The results are as follows:

Loaded 13 image materials

It can be seen that the number of loaded materials is indeed related to the available height of the screen, but it is not calculated according to the ratio of the screen height . I am confused , there is no way, look at the specification document , what is said in it, but no relevant information is found. The details of possible loading are determined by the browser manufacturer.

Therefore, the first conclusion can be drawn:

1. Lazy loading is related to the height of the screen. The smaller the height, the less the number of loads, but it is not a linear relationship.

Question: Is it related to internet speed?

Is it related to network speed, in order to have a better experience when scrolling the scroll bar quickly, without blank space?

I also tested the internet speed to be slow, and it turned out that it was related!

In a slow Internet speed environment, the number of images loaded is larger. In order to avoid errors, I repeated comparison tests and confirmed this conclusion:

2. The number of Lazy loading loads is related to the network speed. The slower the network speed, the greater the number of loads, but it is not a linear relationship.

For example, in the default state, the number of images loaded is stable at 16, but if it is Fast 3G, the number of images loaded is stable at 21:

21 image resource loading

If it is Slow 3G, the number of loads is stable at 29:

Slow 3G loads 29 image resources

User behavior and load testing

When we scrolled the screen, the unloaded pictures started to be loaded sequentially according to their positions, without any waiting or buffering.

Material loaded after scrolling

Therefore, the conclusion can be drawn:

3. Scrolling will trigger the lazy loading of images, and it will not be said to load after scrolling one screen.

In addition, another phenomenon was found during the test:

4. Window resize changes will also trigger lazy loading of images when the screen height changes from small to large.

For example, if we change the console from the bottom to the right, when the browser height image becomes higher, we will find a few more image requests:

Browser console location changes

Resize and scroll request

Scroll memory and skip loading?

When the browser refreshes normally, it will remember the last scrolling position. If the scrolling position of the page was very low before, and the page refreshes at this time, will the pictures at the beginning not load?

I tested it and it turned out to be true. The image at the beginning will not load, only the image below. It seems that the browser is quite smart.

Scroll to refresh the picture after loading

5. Depending on the scroll position, Lazy loading will ignore the first and last picture requests.

Three, syntax and parameters

loadingIn addition 'lazy'to the following values ​​supported by HTML  attributes :

lazy

Images or frames are loaded lazily, that is, when the element resources are about to be seen.

eager

The picture or frame is loaded regardless of everything.

auto

Defaults. The image or frame is loaded based on the browser's own strategy.

If the HTMLImageElement or HTMLIFrameElement element does not explicitly set the loadingattribute or loadingthe value of the attribute is invalid, it will be treated as if 'auto'.

Four, practical guidelines related to JS

1. How to judge whether the current browser supports loading=”lazy”?

The following three methods can be used:

var isSupportLoading = 'loading' in document.createElement('img');

or:

var isSupportLoading = 'loading' in new Image();

or:

var isSupportLoading = 'loading' in HTMLImageElement.prototype;

2. How to get the loading attribute value

Assuming that <img>the DOM variable name of imgthe element is , the loadingattribute value of the image element can be obtained directly with the following syntax:

var attrLoading = img.loading;

Get the result of loading attribute value

If the browser does not support native loadinglazy loading, it will return undefined, for example, in the Firefox browser:

The loading attribute cannot be obtained

3. Loading custom extensions will not be overwritten

E.g:

HTMLElement.prototype.loading = function () {};
img = document.querySelector('[loading]');
img.loading;

We extend a loadingfunction named on the HTMLElement prototype , and it will not affect the original loadingattributes of the image element .

The loading attribute of the image under Chrome is still there

However, for unsupported browsers, such as Firefox, it is obviously affected:

Image loading in Firefox browser

4. How to be compatible with unsupported browsers? Polyfill?

There is a project on GitHub that is compatible with native lazy loading loading attributes, the project address: https://github.com/mfranzke/loading-attribute-polyfill

I looked at the principle, it is necessary to put the image HTML code in the <noscript>tag:

<noscript class="loading-lazy">
    <img
        src="example.jpg"
        loading="lazy"
        alt="zhangxinxu"
        width="250"
        height="150"
    />
</noscript>

A series of question marks immediately appeared on my head. Forgive me for being foolish, this is a hammer-effect polyfill. The performance without JavaScript is indeed in compliance with the specification, but when there is JavaScript, your code basically has no practical value because of the image material. It occupies the size and is closely related to the layout. When placed in the <noscript>label, the width and height dimensions are all 0. The experience is messy and totally unacceptable.

The only feasible solution is to output different HTML codes according to the browser (preferably judged by the JS object) when the HTML code is output, such as HTML that supports native loading:

<img src="example.jpg" loading="lazy" alt="zhangxinxu" width="250" height="150">

This is not supported:

<img data-src="example.jpg" loading="lazy" alt="zhangxinxu" width="250" height="150">

Then use the traditional JavaScript lazy loading and scroll loading to achieve.

5. Summary of research and practice results

Finally, to summarize, the five behavioral characteristics of native lazy loading:

  1. Lazy loading is related to the height of the screen. The smaller the height, the smaller the number of loads, but it is not a linear relationship.
  2. The number of Lazy loading loads is related to the network speed. The slower the network speed, the more the number of loads, but it is not a linear relationship.
  3. Lazy loading is not buffered, and scrolling will trigger the loading of new image resources.
  4. Lazy loading is also triggered when the window resize changes, such as when the screen height changes from small to large.
  5. Lazy loading may also load subsequent image resources first, for example, when the page is loaded with a high scroll height.

Several behavioral characteristics related to JavaScript:

  1. To judge whether the browser supports native loading, it is best to use 'loading' in XXXjudgment.
  2. Get the loading attribute value directly img.loading;
  3. Native loading is not writable. For example, HTMLImageElement.prototype.loading will report Illegal invocation.
  4. Polyfill is a dream and can only wait for browser support.

Above~

There is still 1 minute at 24:00, hehehe.

On the last day before the holiday, catch up with a fairly cutting-edge research essay to wish you all a happy and happy National Day.

By the way, my new book "CSS Selector World" is on the market. When you come back from National Day, remember to buy a copy to support it, um...no, buy a copy to improve your CSS skills.

Guess you like

Origin blog.csdn.net/lu92649264/article/details/112677355