Image preloading in JS

Picture preload

Scene description

We often have pictures loaded in the page during development , When the image to be loaded is too large or the network is not good , A blank page will appear at the image position, which will greatly affect the user experience .
Another thing is that I want to load the pictures in other pages that I will jump to in advance , Prevent images from affecting the loading of the page . Such scenarios can use image preloading technology to optimize our user experience .

Realization principle

The principle of image preloading is to use the browser to cache the same image address , Load pictures locally in advance , Wait until you use it to read pictures from the cache .

Implementation steps

The image preloading implementation usually uses a smaller loading Image space occupying , Then use the asynchronous method to load the pictures , When the image is loaded, fill it in img Node .

Concrete realization

  
  const imgSet = (function() {
    const imgNode = document.createElement('img');
    document.body.appendChild(imgNode);

    const img = new Image();
    //  The picture is added to the display after loading img Node 
    img.onload = function() {
      imgNode.src = img.src;
    }
    
    return (url) => {
      //  to img Node add loading Occupation map 
      imgNode.src = './images/ef9081ecc65482ed7bcfc9b7e0b548d6.gif';
      //  Load pictures to use 
      img.src = url;
    }
  })();

  imgSet('https://img1.baidu.com/it/u=3615107494,579574018&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500');

Effect comparison

First, let's take a look at the effect of directly loading pictures ：

Then look at the effect of using image preloading ：