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!
I took a look at my browser, hehe, it has been upgraded to the latest version, the compatibility is enough, you can play:
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.
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:
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:
If it is Slow 3G, the number of loads is stable at 29:
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.
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:
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.
5. Depending on the scroll position, Lazy loading will ignore the first and last picture requests.
Three, syntax and parameters
loading
In 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 loading
attribute or loading
the 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 img
the element is , the loading
attribute value of the image element can be obtained directly with the following syntax:
var attrLoading = img.loading;
If the browser does not support native loading
lazy loading, it will return undefined
, for example, in the Firefox browser:
3. Loading custom extensions will not be overwritten
E.g:
HTMLElement.prototype.loading = function () {}; img = document.querySelector('[loading]'); img.loading;
We extend a loading
function named on the HTMLElement prototype , and it will not affect the original loading
attributes of the image element .
However, for unsupported browsers, such as Firefox, it is obviously affected:
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:
- 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.
- 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.
- Lazy loading is not buffered, and scrolling will trigger the loading of new image resources.
- Lazy loading is also triggered when the window resize changes, such as when the screen height changes from small to large.
- 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:
- To judge whether the browser supports native loading, it is best to use
'loading' in XXX
judgment. - Get the loading attribute value directly img.loading;
- Native loading is not writable. For example, HTMLImageElement.prototype.loading will report Illegal invocation.
- 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.