初始化项目,预加载图片

项目中难免会使用到图片,在移动端或者h5或者其他项目中,使用到的图片如果因为用户网络慢,或者服务器操作比较慢时,就是加载不出来,或者产生白屏现象.这时候我们需要考虑对图片的处理

预加载 : 提前加载所需要的图片资源，加载完毕后会缓存到本地，当需要时可以立马显示出来，以达到在预览的过程中，无需等待直接预览的良好体验。

简而言之 ： 就是需要显示前先加载

-----------------

懒加载 : 图片的懒加载是等图片在用户要看到时才进行加载 。与预加载相反 。 预加载可以说是勤劳，先做完然后万事大吉 。 而懒加载却是需要我再做 ， 不要我就准备着。

简而言之 懒加载就是 先显示再加载

let loadingstatus = false
let imgNow = 1
let numb = -1
let imgArray = [
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/homebg.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/raffle_bg.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/wfgl_bg.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/gobg.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/hbbgc.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/playbgc.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/quizbgc.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/resulebg.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/bcakg.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/giftnull_bg.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/resultbcakg.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/gift_bg.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/gobtn.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/wfgl_three.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/share_btn.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/playintroduce.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/bgc.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/anwbgc.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/zujushowbgc.png',
  'https://cpicaicdn.abtpt.cn/bxhd/xnzj/tip75.png',
]
const loadingPageImg = () => {
  if (imgNow > imgArray.length) {
    return
  }
  var img = new Image()
  img.src = imgArray[imgNow - 1]
  if (img.complete) {
    imgNow++
    loadingPageImg()
  } else {
    img.onload = function () {
      img.onload = null
      imgNow++
      loadingPageImg()
    }
  }
}