图片预加载 、无序预加载、有序预加载

无序预加载

/**
 * 无序预加载
 * @param {*} srcs
 * @param {*} progress
 * @param {*} done
 */
function unorderLoad(srcs = [], progress, done) {
  let count = 0
  srcs.forEach(it => {
    const img = new Image()
    const handler = function () {
      count++
      progress && progress(Math.round((count * 100) / srcs.length))
      if (count === srcs.length) {
        done && done()
      }
    }
    img.onload = handler
    img.onerror = handler
    img.src = it
  })
}

调用

const imgs = [
  'https:xxxx.jpg'
  'https:yyy.jpg'
]
prendLoad(
 imgs,
 function (count) {
   console.log(count)
 },
 function () {
   console.log('done')
 }
)

无序预加载2 使用 Promise

/**
 * 无序预加载2 使用 Promise
 * @param {*} srcs
 * @param {*} progress
 * @returns
 */
function unorderLoad2(srcs = [], progress) {
  let count = 0
  return new Promise(resolve => {
    srcs.forEach(it => {
      const img = new Image()
      const handler = function () {
        count++
        progress && progress(Math.round((count * 100) / srcs.length))
        if (count === srcs.length) {
          resolve()
        }
      }
      img.onload = handler
      img.onerror = handler
      img.src = it
    })
  })
}

有序预加载

function orderLoad(srcs = [], progress, done) {
  let count = 0
  let i = 0

  const recursion = function (url) {
    const img = new Image()
    const handler = function () {
      count++
      progress && progress(Math.round((count * 100) / srcs.length))
      if (count >= srcs.length) {
        done && done()
      } else {
        recursion(srcs[++i])
      }
    }
    img.onload = handler
    img.onerror = handler
    img.src = url
  }

  if (srcs[i]) {
    recursion(srcs[i])
  }
}

调用

orderLoad(
    imgs,
    count => console.log(count),
    () => console.log('job done')
)
``