h5maker/public/js/main.js

var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  mousewheelControl: true,
  nextButton:'.button-next',
  onInit: function (swiper) {
    swiperAnimate(swiper);
  },
  onSlideChangeEnd: function (swiper) {
    swiperAnimate(swiper);
  },
})

var loader = (function () {
  var loadingContainer = document.getElementById('loadingCont')
  var loadingTxt = document.getElementById('loadingTxt')
  var loadingCircle = document.getElementById('loadingCircle')
  var loadingCircleP = loadingCircle.getAttribute('stroke-dasharray')
  var imgs = document.getElementsByTagName('img')
  var srcList = []
  var imgList = []
  var imgSrc, i
  for (i = 0; i < imgs.length; i++) {
    imgSrc = imgs[i].getAttribute('pre-src')
    if (imgSrc) {
      srcList.push(imgSrc)
      imgList.push(imgs[i])
    }
  }
  if (srcList.length === 0) {
      swiper.container[0].style.opacity = 1
      loadingContainer.style.opacity = 0
      swiperAnimate(swiper)
  }
  return new resLoader({
    resources: srcList,
    onStart: function (total) {
      console.log('start:' + total)
    },
    onProgress: function (current, total) {
      console.log(current + '/' + total)
      var p = current / total
      loadingTxt.textContent = Math.round(p * 100) + '%'
      loadingCircle.style.strokeDashoffset = (1 - p) * loadingCircleP
    },
    onComplete: function (total) {
      console.log('加载完毕:' + total + '个资源')
      for (i = 0; i < imgList.length; i++) {
        imgList[i].setAttribute('src', srcList[i])
      }
      swiper.container[0].style.opacity = 1
      loadingContainer.style.opacity = 0
      swiperAnimate(swiper)
    }
  })
})()
loader.start()