Picture lazy loading, that is, when the picture enters the display “viewport”, to load the corresponding picture. The purpose of this is twofold:
1. When a web page has a large number of images, the browser can load the images in the viewport first. However, those not in the viewport can be loaded after scrolling to the viewport, so as not to cause the problem of occupying the network during the loading of the later picture and affecting the transmission of the previous picture, thus affecting the customer experience.
2. It saves user traffic.
The familiar browser element placement API is getBoundingClientRect(), which gets the position of the element relative to the viewport to load the element. However, this API needs to listen for Scroll events. If scroll events are triggered intensively, the amount of calculation is large, which may cause performance problems. So we would like to introduce IntersectionObserver, a browser API, to implement lazy image loading.
In this paper, a React demo project will be combined to explain how to apply IntersectionObserver in real scenarios. The construction process of the project will be used to explain.
Create-react-app dev/docs/gettin dev/ create-react-app dev/docs/gettin dev/ create-react-app dev/docs/gettin dev/ create-react-app dev/docs/gettin dev/ create-react-app dev/docs/gettin
2. After setting up the project, you can make the following changes to the app. js file in the React demo:
Introduce the LazyLoadImage component and render the LazyLoadImage component with the address of the image link. Here’s how the LazyLoadImage component is implemented:
In the LazyLoadImage component, useRef first obtains the DOM instance of the image, and then observes it through the Observe method of the ImgIntersectionInstance object injected in the window when the component is loaded. The component returns an IMG tag in which the address of the image is passed in via the data-src attribute, followed by the image style for easy viewing.
The ImgIntersectionInstance method in the window is injected with the LazyLoadLogic file in the entry file of the project.
A New IntersectionObserver object is included in the file, and the first parameter is a function passed in to handle the event executed when the API is triggered, where entries are the DOM object that penalizes the event. It can be seen from the arrow function that if isIntersecting of each item is true, the loadItem function will be executed. The loadItem function at the bottom assigns the attribute value of data-src in THE DOM element to SRC and cancel the listening. In this way, the image is loaded.
The second parameter of instantiating IntersectionObserver object rootMargin indicates that the margin value is added to the viewport if the intersection of the browser viewport and the element to be detected is the default condition for triggering the first function parameter. In order to achieve a function of image preloading, it is 350px before entering the viewport to start image loading. For a more detailed explanation, please refer to nguyen Yifeng’s blog and official notes at the end.
Here’s a look at the lazy loading effect, the image must scroll backwards to print… Loaded’s log.
Reference: nguyen other blog: www.ruanyifeng.com/blog/2016/1… MDN:developer.mozilla.org/zh-CN/docs/…