圖片異步加載的幾種實現方案

一. 異步串行加載

要求圖片依次加載（上一張加載完成，再加載下一張）

const imgs = [url1, url2, url3,...];

1. ES5--遞歸方法

function loadImage() {
  const image = new Image();
  const itemUrlImage = imgs.shift();
  if (itemUrlImage) {
    image.src = itemUrlImage;  
    image.onload = function() {
      document.body.appendChild(image);
      loadImage();
    }
  }   
}
loadImage(); 

2. ES6--Promise對象

 function loadByPromise() {
  let promise = function(url) {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.src = url;
      image.onload = function() {
        document.body.appendChild(image);
        resolve('ok');
      }        
    })      
  }
  let p = Promise.resolve();
  for(let url of imgs) {
    p = p.then(() => promise(url))
  }
  p.catch(() => {}).then(() => {
    console.log("加載完成");
  })
}
loadByPromise();

3.ES6--async函數

async function loadAsync() {
  let promise = function(url) {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.src = url;
      image.onload = function() {
        document.body.appendChild(image);
        resolve('ok');
      }        
    })      
  }
  for(let url of imgs) {
    await promise(url);
  }
}
loadAsync();

 二. 異步並行加載

要求圖片並行加載，全部加載完成后，再插入DOM。

const imgs = [url1, url2, url3,...];

1. async函數

async function loadAsync() {
  let promise = function(url) {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.src = url;
      image.onload = function() {
        resolve(image);
      }        
    })      
  }
  const promises = imgs.map(i => promise(i)); //實現並行加載
  let results = [];
  for(let promise of promises) {
    results.push(await promise);  //等待加載完成
  }
  results.forEach(image => {
    document.body.appendChild(image);
  })
}
loadAsync();

2.async函數+Promise.all

 async function loadAsync() {
  let promise = function(url) {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.src = url;
      image.onload = function() {
        resolve(image);
      }        
    })      
  }
  const promises = imgs.map(i => promise(i)); //實現並行加載
  const results = await Promise.all(promises);
  results.forEach(image => {
    document.body.appendChild(image)
  });
}
loadAsync();