Principle of lazy loading of pictures

What is image lazy loading

Similar to large-scale Taobao jd.com and other web pages , There are a lot of product picture information , If we make all the pictures contained in the page load at one time , The loading speed is very slow, and the user experience is very poor .
At present, the popular method is rolling dynamic loading , That is lazy loading , Pictures displayed outside the screen are not loaded by default , As the page scrolls , The picture has entered the display range , Then trigger the loading and display of the picture , It is usually used with the skeleton screen .
The benefits of doing this , First, the page loading speed is fast , It's about saving traffic , Because few users will scroll the page from top to bottom .

The principle of image lazy loading

First the img Labeled src Link to same picture ( The default image ), When js When listening to the picture entering the visual window , Then apply the actual address .
Method 1
The traditional way to do this is , Listen to the scroll After the event , Call the target element （ Green Square ） Of getBoundingClientRect() Method , Get the coordinates that correspond to the upper left corner of the view , Then judge whether it's in the view . The disadvantage of this method is , because scroll Events happen in an intensive way , It takes a lot of calculation , Easy to cause performance problems .
Get the size of the visual window , Judge the cross area
If the picture appears in the viewport , assignment src
Method 2
new IntersectionObserver API, Can be automatically " Observe " Whether elements are visible ,Chrome 51+ Has supported . Because it's visible （visible） The essence is , The target element creates an intersection with the viewport , So this API be called " Cross viewer ".
IntersectionObserver It's the browser's native constructor , Take two parameters ：callback Is a callback function when visibility changes ,option It's the configuration object （ This parameter is optional ）.
IntersectionObserverEntry Object provides information about the target element , There are six attributes .

    time： When visibility changes , It's a high-precision timestamp , The unit is millisecond 
    target： Observed target elements , It's a  DOM  Node object 
    rootBounds： Information about the rectangular area of the root element ,getBoundingClientRect() Return value of method , If there is no root element （ That is, scrolling directly relative to the viewport ）, Then return to null
    boundingClientRect： Information about the rectangular area of the target element 
    intersectionRect： Target element and viewport （ Or root element ） The information of the intersection area 
    intersectionRatio： The visible proportion of the target element , namely intersectionRect Occupy boundingClientRect The proportion of , When fully visible 1, Less than or equal to when completely invisible 0

IntersectionObserver API It's asynchronous , Does not trigger synchronously with the rolling of the target element .