Implementation of lazy loading and preloading

When it comes to the optimization of image resources in front-end performance optimization, lazy loading and preloading cannot be ignored. Below, I will use the most concise and clear language to explain the core points and implementation of lazy loading and preloading.

1. Lazy loading

The main points of lazy loading are as follows:

1. After the image enters the visible area, request image resources;

2. It is very suitable for business scenarios such as e-commerce with many pictures and long pages;

3. It can reduce the loading of invalid resources;

4. Too many resources loaded concurrently will block the loading of js and affect the normal use of the website;

How to implement lazy loading? The main point is that the src attribute of the img tag in html is empty, and a data attribute is given to store the real address of the image. When needed, this address is dynamically assigned to the src attribute of the image.

As follows:

<img src="" class="image-item" lazyload="true" data-original="http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg" />

Similar to the above code, when time is needed, use js script to control the loading of images:

var viewHeight = document.documentElement.clientHeight // height of the visible area

function lazyload () {
   // Get all images to be lazy loaded 
  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()
     // As soon as the picture enters the visible area, dynamic load 
    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')
        item.removeAttribute('lazyload')
      }()
    }
  })
}
// The first screen needs to be called artificially, otherwise the picture will not be displayed when you just enter the page 
lazyload()

document.addEventListener('scroll', lazyload)

2. Preload

The core points of preloading are as follows:

1. Advance requests for static resources such as pictures before they are used;

2. Resources can be loaded from the cache when they are used later to improve user experience;

3. Dependency maintenance for page display (the page can be displayed after the necessary resources are loaded, preventing white screen, etc.);

There are three main ways to achieve preloading:

1. The img tag in html is initially set to display:none;

2. Use the image object in the js script to dynamically create a good picture;

3. Using the XMLHttpRequest object can control the preloading process more finely, but the disadvantage is that it cannot cross domains:

var xmlhttprequest = new XMLHttpRequest(); 
xmlhttprequest.open("GET",src,true);