웹 페이지 구현 로딩 진행률 표시줄

이번에는 웹페이지 로딩 구현을 위한 진행바를 가져오겠습니다. 웹페이지 로딩 진행바 구현을 위한 주의사항은 무엇인가요? 다음은 실제 사례입니다.

페이지 로딩진행률 표시줄처음 YouTube에서 봤고 나중에는 거의 모든 주요 웹사이트에서 볼 수 있어서 사용자가 페이지를 로드할 때 완전히 빈 페이지를 쳐다보는 것을 방지할 수 있고 사용자 경험을 향상시킬 수 있습니다

. 하지만 개발 관점에서 볼 때 이러한 종류의 진행률 표시줄의 진위 여부를 파악하는 것은 정말 어렵습니다. 왜냐하면 논리 코드가 로드되기 전에는 진행률을 계산할 수 없고 논리 코드 자체의 진행률도 계산할 수 없기 때문입니다. 또한 모든 리소스의 로딩을 모니터링하는 것은 불가능합니다.

사실 사용자는 페이지의 몇 퍼센트가 로드되는지 신경 쓰지 않지만, 실제로 관심을 갖는 것은 완전히 로드될 때까지의 시간, 빈 페이지가 완전히 로드되지 않았는지 또는 로드 후 비어 있는지 여부입니다. . 따라서 진행률 표시줄을 "시뮬레이트"할 필요가 없으며 가짜 애니메이션 효과를 사용하여 백엔드 데이터가 반환되기 전에 로딩을 시뮬레이션하고 데이터가 반환된 후 진행률 표시줄을 읽고 숨길 필요가 없습니다.

// 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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS는 호텔 숙박 비용을 자동으로 계산합니다

사진이 로드되기 전에 로딩 원을 표시하는 효과

위 내용은 웹 페이지 구현 로딩 진행률 표시줄의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!