JS中图片缓冲loading技术的实例代码

2023年6月11日上午1:08 • JavaScript

下面我将详细讲解JS中图片缓冲loading技术的实例代码攻略。

1. 图片缓冲loading技术的作用

图片缓冲loading技术可以解决图片加载过慢或者图片尚未加载完成时页面出现的空白或错乱现象，使得页面更加优雅和美观。

2. 实现步骤

2.1 定义图片缓存对象

首先，我们需要定义一个空对象，用于保存本页面中所需加载的所有图片资源。

let imgObj = {};

2.2 预加载图片

接下来，我们需要编写一个方法，用于预加载图片。该方法主要实现两个功能：

预加载图片，将图片对象保存到imgObj对象中。
根据加载状态，动态显示加载进度。

以下代码演示了预加载图片的实现方式：

function preloadImage(arr) {
  let progress = 0;
  let len = arr.length;

  for(let i = 0; i < len; i++) {
    let img = new Image();
    img.onload = img.onerror = function() {
      progress++;
      let percent = Math.floor(progress / len * 100);
      console.log(`${percent}%`);
    };
    img.src = arr[i];
    imgObj[arr[i]] = img;
  }
}

arr为一个存储图片路径的数组。
let progress = 0;声明一个计数器progress用于记录已加载完成的图片数量。
let len = arr.length; 记录图片数组的长度。
let img = new Image(); 声明一个新的图片对象。
img.onload = img.onerror = function() {}图片加载完成或者出错时的回调函数。
progress++图片加载完成或者出错时，计数器加1，记录完成的情况
let percent = Math.floor(progress / len * 100); 计算加载进度百分比，向下取整。
console.log(${percent}%);将加载进度百分比打印出来，你可以根据实际情况，改为展示进度条等效果等等。
img.src = arr[i]; 图片对象的地址属性赋值为图片路径。
imgObj[arr[i]] = img; 将图片对象保存到imgObj对象中，以路径名作为imgObj对象的属性名。

2.3 使用预加载的图片

全部图片预加载完成后，我们就可以通过imgObj对象来获取预加载的图片，然后使用这些图片了。以下代码演示了如何使用imgObj中的图片对象：

let img = imgObj['./images/logo.png']; //根据图片路径获取img对象
document.body.appendChild(img); //将img对象添加到body中

以上代码中，我们将预加载的logo图片动态添加到了body中。

3. 示例说明

3.1 图片预加载效果实现

以下是一个使用图片预加载技术实现的图片轮播效果示例。代码实现步骤和上文类似，只不过是将预加载的图片插入到网页中的轮播图中。

<button id="pre_load_btn">图片预加载</button>
<div id="imgs_wrap"></div>

let imgObj = {};

function preloadImage(arr) {
  let progress = 0;
  let len = arr.length;

  for(let i = 0; i < len; i++) {
    let img = new Image();
    img.onload = img.onerror = function() {
      progress++;
      let percent = Math.floor(progress / len * 100);
      console.log(`${percent}%`);
      if(progress === len) {
        showImgs(arr);
      }
    };
    img.src = arr[i];
    imgObj[arr[i]] = img;
  }
}

function showImgs(arr) {
  let imgsWrap = document.getElementById('imgs_wrap');
  for(let i = 0; i < arr.length; i++) {
    let img = imgObj[arr[i]];
    imgsWrap.appendChild(img);
  }
}

let imgArr = [
  './images/01.jpg',
  './images/02.jpg',
  './images/03.jpg',
  './images/04.jpg',
];

let preLoadBtn = document.getElementById('pre_load_btn');
preLoadBtn.onclick = function() {
  preloadImage(imgArr);
};

3.2 图片预加载进度展示效果实现

以下是一个图片预加载进度展示的示例。点击按钮后，将会开始图片预加载，并在页面上展示图片预加载的进度，注意，你需要将以下HTML和js代码复制到你的HTML文件中试验：

<button id="pre_load_btn">图片预加载</button>
<div id="progress_wrap"></div>

let imgObj = {};

function preloadImage(arr) {
  let progress = 0;
  let len = arr.length;

  let progressWrap = document.getElementById('progress_wrap');
  progressWrap.innerHTML = '0%';

  for(let i = 0; i < len; i++) {
    let img = new Image();
    img.onload = img.onerror = function() {
      progress++;
      let percent = Math.floor(progress / len * 100);
      progressWrap.innerHTML = `${percent}%`;
      console.log(`${percent}%`);
      if(progress === len) {
        console.log('图片加载完毕！');
      }
    };
    img.src = arr[i];
    imgObj[arr[i]] = img;
  }
}

let imgArr = [
  './images/01.jpg',
  './images/02.jpg',
  './images/03.jpg',
  './images/04.jpg',
];

let preLoadBtn = document.getElementById('pre_load_btn');
preLoadBtn.onclick = function() {
  preloadImage(imgArr);
};

以上代码中，我们根据向页面插入的div元素节点，动态显示图片预加载的进度，你也可以根据需求自定义样式展示进度条等效果。