Javascript-is there a question about lazyload. js loading lazyload images in the article?

Is there a question about lazyload. js loading lazyload images in this article? Modify the src attribute of the target img element to the orginal attribute to interrupt image loading. Lazyloa needs to be used like this. You need to add an orginal attribute pointing to the source image. Isn't the image in my article necessary in the service... lazyload is lazyload for images in an article. question about js?

Modify the src attribute of the target img element to the orginal attribute to interrupt image loading.

Lazyloa needs to be used in this way. You need to add an orginal attribute to point to the source image. Isn't it necessary to use regular expressions on the server side for the image in my article? This is a lot of trouble !!!

Why can't lazyloa block the browser from automatically loading images before loading images in the browser?

Isn't js an event where the page loading is complete (html loading is complete, but resources are not loaded yet? It seems like onreadystatechange is something I forgot) I know that there is such an event. Don't lazyloa know it? I also need img to work with it. I think it's amazing, I know what to do with lazyloa to change img like this. Isn't it enough to write a rolling event?

Please kindly advise!

Reply content:

Is there a question about lazyload. js loading lazyload images in this article?

Modify the src attribute of the target img element to the orginal attribute to interrupt image loading.

Lazyloa needs to be used in this way. You need to add an orginal attribute to point to the source image. Isn't it necessary to use regular expressions on the server side for the image in my article? This is a lot of trouble !!!

Why can't lazyloa block the browser from automatically loading images before loading images in the browser?

Isn't js an event where the page loading is complete (html loading is complete, but resources are not loaded yet? It seems like onreadystatechange is something I forgot) I know that there is such an event. Don't lazyloa know it? I also need img to work with it. I think it's amazing, I know what to do with lazyloa to change img like this. Isn't it enough to write a rolling event?

Please kindly advise!

Lazyloa needs to be used in this way. You need to add an orginal attribute to point to the source image. Isn't it necessary to use regular expressions on the server side for the image in my article? This is a lot of trouble !!!

The image lazyload needs to be like this. This has nothing to do with the server. What is regular expression writing on the server?

Why can't lazyloa block the browser from automatically loading images before loading images in the browser?

The orginal attribute points to the source image to achieve this purpose. The orginal attribute is not available in the img label, and the browser DOM parser is just used as a common user-defined attribute, image Information is not loaded as the src attribute.

Isn't js an event where the page loading is complete (html loading is complete, but resources are not loaded yet? It seems like onreadystatechange is something I forgot) I know that there is such an event. Don't lazyloa know it? I also need img to work with it. I think it's amazing, I know what to do with lazyloa to change img like this. Isn't it enough to write a rolling event?

This section does not understand. You can activate lazyload by listening to Page scrolling events, load real image data, and assign the orgina attribute value to the src attribute.

For example:
This is the first DOM element to be loaded when the page is loaded.

When the page appears, upload loading.gif. This file is usually very small and can be loaded immediately.
In this way, when the image is not displayed, the sample image is in the middle and lower part of the page, and the user has not scroll to the specified position, the image data does not need to be loaded, reduce page traffic and page rendering data, window. onload event listening can respond faster. This is irrelevant to the documentonready event.
When you need to display an image, that is, when you scroll to a specific location on the page, use JS to direct the img src attribute to the value of the orginal attribute, and delete the orginal attribute.

At this time, the img points to the real address before the image data starts to be loaded.

Why do we need to set the original attribute to implement lazyload?

Almost all operations (except Network Operations) in the browser are performed in a single thread. Network operations can be performed by multiple parallel threads. The number of concurrent connections is limited (usually 2 to 6, and Firefox 3 is 6 ). The main thread has an event loop, which is an infinite loop. It is always in the accepted processing state and waits for the event (such as layout and draw events) to occur and process it. Image resource loading is a network operation. When the browser parses an img tag, the image information is loaded using the network address specified by src, instead of loading resources after the documentonready event listening is completed, you need to set a custom attribute to save the actual address to implement lazyload (not loading real image resources, set it to the src attribute when it needs to be displayed.

We can make a simple experiment to see if src will be loaded:
As follows:
After the page is executed, we can view
Failed to load resource: the server responded with a status of 404 (Not Found)
Prompt information
So the wrong resource request still happened.