Fortschrittsbalken für das Laden der Webseitenimplementierung

Dieses Mal bringe ich Ihnen den Fortschrittsbalken zum Laden der Webseite. Was sind die Vorsichtsmaßnahmen für die Implementierung des Ladefortschrittsbalkens für die Webseite? Fall, werfen wir einen Blick darauf.

Laden der SeiteFortschrittsbalkenIch habe es zuerst auf YouTube gesehen und später ist es auf fast allen großen Websites zu sehen, sodass Benutzer die Seite laden können, ohne sich darum kümmern zu müssen Seien Sie benommen und schauen Sie auf eine völlig leere Seite, um die Benutzererfahrung zu verbessern

Aber aus Entwicklungsperspektive ist es wirklich schwierig, die Authentizität dieser Art von Fortschrittsbalken zu erfassen, da vor dem Logikcode ist geladen, wir alle Der Fortschritt kann nicht gezählt werden, und der Fortschritt des Logikcodes selbst kann auch nicht gezählt werden. Darüber hinaus ist es uns unmöglich, die Auslastung aller Ressourcen zu überwachen.

Tatsächlich ist es den Benutzern egal, wie viel Prozent Ihrer Seite geladen ist, aber was sie wirklich interessiert, ist, wie lange es dauert, bis sie vollständig geladen ist, und ob die leere Seite noch nicht vollständig geladen ist oder nicht ist nach dem Laden leer. Wir müssen also keinen Fortschrittsbalken „simulieren“, sondern einen gefälschten Animationseffekt verwenden, um das Laden zu simulieren, bevor die Back-End-Daten zurückgegeben werden, und den Fortschrittsbalken lesen und nach der Rückgabe der Daten ausblenden.

// progress-bar.vue
<template>
 <transition name="fade">
 <p class="progress-bar" v-if="isShow">
 </p>
 </transition>
</template>
<script type="text/babel">
 export default {
 data() {
  return {
  isShow: true, // 是否显示进度条
  val: 0, // 进度
  }
 },
 props: {
  /**
  * 每10毫秒自增幅度
  */
  step: {
  type: Number,
  default: 5,
  },
  /**
  * 初始值
  */
  initVal: {
  type: Number,
  default: 0,
  },
  /**
  * 到一定进度停止
  */
  stopVal: {
  type: Number,
  default: 80,
  },
  /**
  * 进度条继续到成功
  */
  isOk: {
  type: Boolean,
  default: false,
  },
 },
 mounted() {
  // 初始化后加载进度，加载到百分之多少由stopVal决定
  this.val = this.initVal
  let step = this.step
  let timer = setInterval(() => {
  this.val = this.val + step
  this.$el.style.width = this.val + '%'
  // 父组件数据加载完前进度条最多到stopVal的这个百分值
  if (this.val >= this.stopVal) {
   clearInterval(timer)
   return
  }
  }, 10)
 },
 watch: {
  /**
  * 监听组件props变化决定是否继续加载，一般在父组件数据加载完后改变此标志位
  */
  isOk() {
  let val = this.val
  let step = this.step
  let timer = setInterval(() => {
   val = val + step
   this.$el.style.width = val + '%'
   // 加载到百分百完成
   if (val >= 100) {
   // 关闭定时器
   clearInterval(timer)
   // 加载完成关闭进度条
   this.isShow = false
   // 加载完成的回调
   this.$emit('callback', 'load success')
   return
   }
  }, 10)
  },
 },
 }
</script>
<style lang="stylus" rel="stylesheet/stylus">
 .progress-bar {
 position fixed
 top 0
 height 6px
 width 0
 background-color #999
 }
 .fade {
 &-enter-active, &-leave-active {
  transition: all .3s
 }
 &-enter, &-leave-active {
  opacity: 0
 }
 }
</style>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

JS berechnet automatisch die Kosten für die Hotelübernachtung

Der Effekt der Anzeige des Ladekreises vor dem Bild ist geladen

Das obige ist der detaillierte Inhalt vonFortschrittsbalken für das Laden der Webseitenimplementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!