js中的图片预加载

图片预加载

场景描述

我们在开发中经常会有页面中会加载图片的情况，当要加载的图片过大或者网络不太好的时候，图片位置就会出现空白页面非常影响用户体验。
再有就是我想把将要跳转的其他页面里的图片提前加载好，防止因为图片影响页面的加载。诸如此类的场景都可以使用图片预加载技术来对我们的用户体验进行优化。

实现原理

图片预加载的原理就是利用浏览器对同一图片地址的缓存，将图片提前加载到本地，等到使用的时候就从缓存中读取图片。

实现步骤

图片预加载实现一般先用一张较小的loading图片进行占位，然后使用异步方式进行图片加载，等图片加载好了再把它填充到 img 节点里即可。

具体实现

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

    const img = new Image();
    // 图片加载好后添加到展示的img节点上
    img.onload = function() {
      imgNode.src = img.src;
    }
    
    return (url) => {
      // 给img节点添加loading占位图
      imgNode.src = './images/ef9081ecc65482ed7bcfc9b7e0b548d6.gif';
      // 加载将要使用的图片
      img.src = url;
    }
  })();

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

效果对比

首先看下直接加载图片的效果：

然后在看下使用图片预加载的效果：