Why — Why lazy loading and preloading?

Why lazy loading and preloading? In fact, whether lazy loading or preloading, are in order to let the user have a better use experience, for programmers, that is performance optimization, I looked up a lot of information seems to be about lazy loading and preloading pictures, all take pictures!! (So lazy loading and preloading below are for images)

What — Learn more about it!

Lazy loading

Commonly used for lazy loading images in web pages, images outside the visual area will not be loaded until the user scrolls to them.

1 > knowledge
  1. IntersectionObserver:Is the constructor provided by the viewer, which literally means cross observation
const observer=new IntersectionObserver(callback)// This callback function is fired when seen or unseenObserver. observe(DOM node) observer.unobserve(DOM node) observer.unobserveCopy the code
  1. window.innerHeight()Can get window size elementsgetBoundingClientRect().topGets the distance of the picture from the window
2 > demo test
//css
 .top{
    height: 1200px;
    width: 100%;
    background-color: pink;
  }
  .end{
    height: 800px;
    width: 100%;
    background-color: blue;
  }
Copy the code
/ / HTML module
<div class="top"></div>
  <div class="center">
    <img  data-img="./images/pic1.png">
    <img  data-img="./images/pic2.png">
    <img  data-img="./images/pic3.png">
  </div>
  <div class="end"></div>
Copy the code
/ / js module
 const images=document.querySelectorAll('img')
 const callback=entries= >{
      // Entry is an array and this is an array of information for three images so you can iterate to get an IMG entry which is an IMG
      entries.forEach(entry= >{
        //isIntersecting is a Boolean value which is true only if the image is in the view area. If the image is in the view area, it can be used to determine whether the image has been observed or loaded
        if(entry.isIntersecting){
          const image=entry.target
          const dataStr=image.getAttribute('data-img')
          image.setAttribute('src',dataStr)
          observer.unobserve(image) // Unobserve the img element observer.observe(image)
          console.log('IntersectionObserver event triggered'); }})}const observer=new IntersectionObserver(callback)
    // let each img element be observed
    images.forEach(image= >{
      observer.observe(image)
    })
Copy the code

This test fully implements lazy loading of images, loading them only when they are in the view area, and triggering no more than a page scroll event

Two. Preloading

Preloading: Images are loaded ahead of time and rendered directly from the local cache when the user needs to view them

The way to implement preloading (the specific code is not shown)
  • Preloading with CSS and JavaScript
  • Use JavaScript only for preloading
  • Use Ajax for preloading
Three. Two differences

The essence of two technologies: the behavior of both is opposite, one is early loading, one is slow or even not loading. Lazy loading relieves the pressure on the front end of the server, while preloading increases it.

How — Meaning of lazy loading and preloading

Lazy loading

The main purpose of lazy loading is to serve as a front-end optimization for the server, reducing the number of requests or delayed requests.

preload

Preloading can be said to sacrifice the front-end performance of the server for a better user experience, so that users can get the fastest response to the operation.