lixin-web/webapp/js/indexPage.js

vue and bootstrap

import '!style!css?minimize!postcss!less!../less/page/index-desktop.less'
import Vue from 'vue'
import { Carousel,CarouselItem} from 'element-ui'
Vue.use(Carousel)
Vue.use(CarouselItem)
import '!style!css?minimize!postcss!../css/element-theme/carousel.css'
import '!style!css?minimize!postcss!../css/element-theme/carousel-item.css'

import '!style!css?minimize!postcss!animate.css/source/fading_entrances/fadeInLeft.css'
import '!style!css?minimize!postcss!animate.css/source/fading_entrances/fadeInRight.css'

import {NOTICE,util} from './vuex'
import {debounce} from 'lodash'
import Will,{preloadImage,store} from './util/Will'

!isDevEnv && $vmBar.isLogin && sessionStorage.modalNotice && Will.ajax({}, '/api/system/list-notice?content=true')
           // import('../module/modalNotice.json')
  .then(data => {
    if (data[0] && data[0].title) {
      NOTICE.list = data.slice(0,10)
      setTimeout(() => new Vue({el:'.modal-notice',render: h => h(require('../component/util/ModalNotice').default)}),1000)
    }

  })
import Pace from '../module/ref/pace'
!localStorage.indexPageLoad && Pace.start({ajax: false, // disabled
  document: false, // disabled
  eventLag: false})
const indexBanner = document.querySelector('.index-banner')

let lobbyImgs;
let isWebP = util.checkWebP;
import CarouselCard from '../component/CarouselCard'
preloadImage('index/index_bg',true,{bg:indexBanner})
  .then(() => {
    !localStorage.indexPageLoad && Pace.stop()
    localStorage.indexPageLoad = true
    localStorage.indexBannerBg = `/img/sample/index/index_bg_preload.${isWebP ? 'webp' : 'jpg'}`
    preloadImage('index/banner_text',true,{bg:'.index-banner-text',ext:'png',isWebP})
  })
  .then(() => {
    lobbyImgs = Array.from(document.querySelectorAll('.games-lobby [data-defer]'))
    return preloadImage(lobbyImgs.map(i => i.dataset.defer),true,{isWebP})
  })
  .then(url => {
    lobbyImgs.forEach((v,k) => v.src = url[k])
    return preloadImage('index/download_handle',true,{bg:'.game-download-banner .container > div:first-child',ext:'png',isWebP})
  })
  .then(() => {
    preloadImage('index/site_promotions',true,{bg:document.querySelector('.site-promotions'),isWebP})
    new Vue({el:'#event-carousel',render: h => h(CarouselCard)})
  })

const resizeHeight = () => {
  let clientHeight = document.documentElement.clientHeight

  indexBanner.style.height = (clientHeight <= 1000 ? clientHeight - 109 : 838) + 'px'

}
// $(window).on('resize', debounce(() => {
//   document.documentElement.clientWidth >= 1000 && resizeHeight()
// }, 150));
window.addEventListener("resize", debounce(() => {
  document.documentElement.clientWidth >= 1000 && resizeHeight()
}, 150), false);
resizeHeight()
import Service from '../component/util/Service'
new Vue({el:'.online-service',render: h => h(Service)})

// isDevEnv && require('../module/Firework')
let docHeight = document.documentElement.clientHeight
const siteHelp = document.querySelector('.site-help')
const siteHelpList = Array.from(document.querySelectorAll('.site-help .row > li'))
siteHelpList.forEach(i => (i.classList.add('animated'),i.classList.add('fade')))
//image aync load,not to use IntersectionObserver
// if(window.IntersectionObserver){
//   var io = new IntersectionObserver(fadeSiteHelp,{threshold: [0.5]});
//
//   io.observe(document.querySelector('.site-promotions'))
// }
let  siteHelpAnimated = false;

function fadeSiteHelp (){
  siteHelpList.slice(0,2).forEach(i => i.classList.add('fadeInLeft'))
  siteHelpList.slice(-2).forEach(i => i.classList.add('fadeInRight'))
  siteHelpAnimated = true
}


document.addEventListener('scroll',() => {
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  if (!siteHelpAnimated && scrollTop >= siteHelp.offsetTop - docHeight) {
    fadeSiteHelp()
  }
})