Js promotion: how to implement lazy loading of images

To know what it is, but also to know what it is, what method to use in different scenarios, and how to achieve the best.

Why is there lazy loading of images, and what problems have been solved? Besides lazy loading, what about preloading? What is preloading, how to achieve it, and how is it compared to lazy loading?

Why lazy loading of pictures and the problems solved by lazy loading

For example: on-demand loading, the user can only see a part of the image data in the visible window, if the image is loaded at one time, it will consume a lot of loading time, easily cause freezes and other phenomena, and waste the performance at this time. Therefore, lazy loading is required (it can be understood that the user slides the visible window to load the data of the visible window)

Lazy loading: When the picture appears in the visible area of the browser, set the real path of the picture and display the picture. Preloading: Load images in advance, and render them directly from the local cache when the user needs to view them. One is early loading, and the other is lazy loading or even no loading. Lazy loading can relieve the pressure on the front end of the server to a certain extent, while preloading will increase the pressure on the front end of the server. Of course, preloading can help users get the fastest response when browsing website content and improve user experience

The concept of lazy loading

Lazy loading is also called delayed loading and on-demand loading. It refers to the delayed loading of image data in long web pages, which is a better way to optimize web page performance. In a relatively long web page or application, if there are many pictures, all the pictures are loaded, and the user can only see the part of the picture data in the visible window, which wastes performance. Using lazy loading can effectively improve loading performance.

Realization principle

We know that the loading of pictures is caused by src. When assigning a value to src, the browser will request picture resources. According to this principle, we use the data-xxx attribute of HTML5 to store the path of the picture. When the picture needs to be loaded, assign the path of the picture in the data-xxx to src, so that the picture can be loaded on demand, that is, lazy loading .

Before analyzing the code implementation, we also need to understand the following knowledge points:

window.innerHeight is the height of the viewable area of the browser.
document.body.scrollTop || document.documentElement.scrollTop is the distance the browser has scrolled.
imgs.offsetTop is the height of the top of the element from the top of the document (including scrollbar distance).
Image loading condition: img.offsetTop < window.innerHeight + document.body.scrollTop.

Code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>图片懒加载</h1>
    <div class="container">
      <p>Lorem</p>
      <p>Lorem</p>
      <img class="scroll-con-img" src="" data-src="./images/曾小龙.jpg" />
      <img class="scroll-con-img" src="" data-src="./images/meet.jpg" />
      <img class="scroll-con-img" src="" data-src="./images/meet.jpg" />
    </div>
  </body>
</html>
<script>
  //第一种方法
  var imgs = document.querySelectorAll('img')
  function lozyLoad() {
    var scrollTop =
      document.body.scrollTop || document.documentElement.scrollTop
    var winHeight = window.innerHeight
    for (var i = 0; i < imgs.length; i++) {
      if (imgs[i].offsetTop < scrollTop + winHeight) {
        imgs[i].src = imgs[i].getAttribute('data-src')
      }
    }
    console.log("我想你了");
  }
  window.onscroll = lozyLoad();
</script>

Js promotion: how to implement lazy loading of images

Why lazy loading of pictures and the problems solved by lazy loading

The concept of lazy loading

Realization principle

Code

Guess you like