Lazy loading and preloading

1. Lazy Loading

1. What is lazy loading

Lazy loading, also known as lazy loading, refers to the lazy loading of images in long web pages, which is a good way to optimize web page performance . Images outside the viewable area don't load until the user scrolls to them. This is the opposite of image preloading, using lazy loading on long web pages will make web pages load faster. In some cases, it can also help reduce server load. It is often used in e-commerce website scenarios with many pictures and long pages.

2. Why use lazy loading

It can improve the user's experience . Let's imagine that when a user opens a long page like Taobao on a mobile phone, if all the pictures on the page need to be loaded, due to the large number of pictures and the long waiting time, the user will inevitably complain. Seriously affect the user experience.
Reduce the loading of invalid resources , which can significantly reduce the pressure and traffic on the server, and also reduce the burden on the browser.
Preventing too many resources from concurrent loading will block the loading of js and affect the normal use of the website.

3. The principle of lazy loading

First, set the src attribute of the image on the page to an empty string, and set the real path of the image in the data-original attribute.
When the page scrolls, you need to listen to the scroll event. In the callback of the scroll event, determine our Whether the lazy loaded image enters the visible area, if the image is in the visible area, set the src attribute of the image to the value of data-original, so that lazy loading can be achieved.

4. Lazy loading implementation steps

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Lazyload</title>
  <style>
    .image-item {
      display: block;
      margin-bottom: 50px;
      height: 200px; /*Be sure to set the image height*/
    }
  </style>
</head>

<body>
  <img src="" class="image-item" lazyload="true" data-original="images/1.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/2.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/3.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/4.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/5.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/6.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/7.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/8.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/9.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/10.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/11.png" />
  <img src="" class="image-item" lazyload="true" data-original="images/12.png" />
  <script>
    var viewHeight = document.documentElement.clientHeight //Get the height of the viewport


    function lazyload() {
      var eles = document.querySelectorAll('img[data-original][lazyload]')
      Array.prototype.forEach.call(eles, function (item, index) {
        var rect
        if (item.dataset.original === "")
          return
        rect = item.getBoundingClientRect()// is used to obtain the position of the left, top, right and bottom of an element in the page relative to the browser window
        if (rect.bottom >= 0 && rect.top < viewHeight) {
          !function () {
            var img = new Image()
            img.src = item.dataset.original
            img.onload = function () {
              item.src = img.src
            }
          }
          item.removeAttribute("data-original")//Remove the attribute, no more traversal next time
          item.removeAttribute("lazyload")
        }
      } 
}

    lazyload()//When the screen is not scrolled at the beginning, a function should be triggered first to initialize the page image of the home page
    document.addEventListener("scroll", lazyload)
  </script>
</body>

</html>

What are the ways to optimize page performance Function throttling and stabilization

Blogs