Lazy loading

What is lazy loading?

That is, lazy load, load on demand

For example, loading images gradually with scrolling rather than loading them all at once. For example, when vue builds a project, loading components on demand from third-party libraries (such as element-UI). For example, when front-end project packaging, avoid single file size and code segmentation

Why lazy loading? What problems does it solve?

According to the definition of lazy loading, its function is to load resources lazily or on demand, so it has the following characteristics:

1. Reduce the load of unnecessary resources, reducing the pressure and traffic on the server

2. Improve user experience and load images on demand, avoiding long waits for all images to load

How does lazy loading work?

Image loading is caused by the SRC attribute of the IMG tag.

So you can set the SRC attribute to null and add a custom attribute to store the address of the image to be loaded. When the image needs to be loaded, the image address is assigned to the SRC attribute to achieve on-demand loading. (The custom attributes in HTML5 are in the form of data-xxx)

The focus of this implementation is to determine when the image needs to be loaded.

Img. OffsetTop < img.window.innerHeight + document.body.scrollTop
//imgs.offsetTop is the height of the top of the element from the top of the document (including the distance of the scroll bar)
//window.innerHeight is the height of the browser's viewable area
/ / the document. The body. The scrollTop | | document. The documentElement. The scrollTop of the browser scroll in the distance

Copy the code

Implementing lazy loading

<div class="container">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
    <img src="loading.gif"  data-src="pic.png">
</div>
<script>
    let imgs = document.querySelectorAll('img');
    function lazyLoad(){
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        let winHeight= window.innerHeight;
        for(l i=0; i < imgs.length; i++){if(imgs[i].offsetTop < scrollTop + winHeight ){
                imgs[i].src = imgs[i].getAttribute('data-src'); }}}window.onscroll = lazyLoad();
</script>// Because scrollbar scrolling is also a high frequency event, throttling optimization can be carried out, this article does not repeat, left to the reader implementationCopy the code

What’s the difference between lazy loading and preloading?

Lazy loading refers to lazy loading, loading on demand, and loading corresponding resources when the user needs them

Preloading is to load resources to the local area in advance and fetch resources from the cache

Supplementary parts:

1.Element.getBoundingClientRect()

This method returns the size of the element and its position relative to the viewport. Its top value represents the distance from the top left corner of the element to the top of the viewport

// Another form of judgment condition for lazy loading
img.getBoundingClientRect().top < window.innerHeight
Copy the code

2. Obtain the screen viewable window size

// Native method:
window. InnerHeight Standard browser and IE9+documentLow. The documentElement. ClientHeight standard browser and version IE standard modedocument.body.clientheight Low version promiscuous mode/ / jQuery methods:
$(window).height()
Copy the code

3. Obtain the scrolling distance of the scroll bar

// Native method:
window. PagYoffset Standard browser and IE9+documentLow. The documentElement. ScrollTop compatible with ie version of the standard modeldocument.body.scrollTop is compatible with promiscuous mode/ / jQuery methods:
$(document).scrollTop()
Copy the code

4. Get the size of the element

/ / jQuery:
$(document).offset(). The distance between the top element and the top of the document $(document).offset().left The distance between the element and the left edge of the document.// Native method:
.getoffsetTop()
Copy the code

References:

Front End Performance Optimization (juejin. Cn)

Lazy loading and preloading – Jianshu.com