1

src/assets/style/index.css

@@ -779,7 +779,7 @@ body {
   .wapbody .section-loading .section1-wwbox .title2 {
     background-position: top;
     background-size: 80% auto;
-    background-image: url(/img/webp/wap/section1/section1-title.webp);
+    background-image: url(/img/webp/section1-title.webp);
   }
   
   .dialoghide {

src/components/imgLoading.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="section-loading" v-show="progress != 100">
+    <div class="section1-wwbox">
+        <!-- <div class="icon">
+          <img src="/img/webp/wsicon-sec.webp" alt="" />
+        </div> -->
+        <p id="progress-bar"><span>{{ progress }}</span>%</p>
+    </div>
+  </div>
+</template>
+  
+<script setup>
+import { onMounted, ref } from "vue";
+import { emitter } from "../emitter.js";
+import imgList from '../utils/loadImg'
+defineOptions({
+  name: "img-loading",
+});
+onMounted(()=>{
+  loadImages(imgList)
+})
+const progress = ref(0);
+const framePro = ref(0)
+const imgPro = ref(0)
+emitter.on("updatePress", (val) => {
+    framePro.value = val * 0.7 
+    progress.value = framePro.value + imgPro.value
+});
+// 总任务 
+function loadImages(list){ 
+    const pageSize = 5 
+    let pageNum = 0 ,totalNum = list.length;
+    return new Promise((reslove,reject)=>{ 
+        function run(){ 
+            Promise.all(genetateTasks(list,pageSize,pageNum)).then(()=>{ 
+                console.log('pageNum', pageNum, list.length);
+                pageNum++
+                const hasLength = pageSize * pageNum 
+                imgPro.value = Math.round((hasLength/(list.length + 1))*30)
+                progress.value = framePro.value + imgPro.value
+                if(totalNum > hasLength){ 
+                    run() 
+                }else { 
+                    reslove(true) 
+                } }) 
+           } 
+           run() 
+ }) }
+// 子任务 
+function genetateTasks(list,pageSize,pageNum){
+    const promiseArr = [] 
+    const start = pageNum * pageSize 
+    const end = (pageNum + 1) * pageSize - 1 
+    console.log('genetateTasks', pageSize,pageNum);
+    // progress.value = 
+    for(let i = start;i<end;i++){ 
+        const p = new Promise((reslove,reject)=>{ 
+            const img = new Image() 
+            img.src = list[i] 
+            img.onload = img.onerror = reslove 
+         }) 
+         promiseArr.push(p) 
+    } 
+    return promiseArr 
+}
+// emitter.on("closePreloadinng");
+// emitter.emit("preBaseLoadingdone");
+</script>
+<style lang="scss" scoped>
+.scroll-icon {
+  opacity: 1;
+  z-index: 10;
+  position: absolute;
+  bottom: 1em;
+  left: 50%;
+  margin-left: -0.6em;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2em;
+  width: 1.2em;
+  font-size: 22px;
+  color: rgba(255, 255, 255, 0.5);
+  border-radius: 2em;
+  border: solid 2px;
+  transition: 0.4s;
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    background-color: #fff;
+    border-radius: 50%;
+    animation: scroll-icon 2.2s infinite cubic-bezier(0.75, 0.05, 0.36, 1);
+  }
+}
+
+@keyframes scroll-icon {
+  0% {
+    transform: translateY(-12px);
+    opacity: 0;
+  }
+
+  30%,
+  70% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(12px);
+    opacity: 0;
+  }
+}
+</style>

src/pages/section1.vue

@@ -16,10 +16,13 @@
         Gentleness
       </p>
     </div>
+    <loadImg/>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import loadImg from '../components/imgLoading.vue';
+</script>
 
 <style lang="scss" scoped>
 @import "/src/assets/style/index.css";

src/utils/loadImg.js

@@ -0,0 +1,72 @@
+export default [
+    '/img/webp/chapterunit/chapter-bg.webp',
+    '/img/webp/chapterunit/unit-bg.webp',
+    '/img/webp/navicon-active.webp',
+    '/img/webp/nav-bg.webp',
+    '/img/webp/navicon.webp',
+    '/img/webp/ewm-bg.webp',
+    // '/img/webp/section1/logo.webp',
+    '/img/webp/xnzt-btn.webp',
+    '/img/infoicon.png',
+    '/img/webp/section1/section1-title.webp',
+    '/img/webp/section1-title.webp',
+    '/img/close-btn.png',
+    '/img/nomusic.png',
+    '/img/music.png',
+    '/img/webp/wwfirst-bg.webp',
+    '/img/webp/wsicon-sec.webp',
+    '/img/webp/section2/line.webp',
+    '/img/webp/section1/bg.webp',
+    '/img/webp/section1/bg.webp',
+    '/img/webp/section1/logo.webp',
+    '/img/webp/section2/bg.webp',
+    '/img/section1/section1-ww.webp',
+    '/img/section1/bg.webp',
+    '/img/section1/logo.webp',
+    '/img/section1/section1-title.webp',
+    '/img/section2/bg.webp',
+    '/img/section2/line.webp',
+    '/img/map/map-rnsys.webp',
+    '/img/webp/chapterunit/chapter-bg.webp',
+    '/img/webp/chapterunit/unit-bg.webp',
+    '/img/map/map-k.webp',
+    '/img/webp/jue-1.webp',
+    '/img/map/map-yr.webp',
+    '/img/webp/yuren-1.webp',
+    '/img/map/map-yl.webp',
+    '/img/webp/yulong-1.webp',
+    '/img/map/map-yzl.webp',
+    '/img/webp/yuzhulong-1.webp',
+    '/img/map/map-kfb.webp',
+    '/img/webp/kefubi-1.webp',
+    '/img/map/map-kffsjz.webp',
+    '/img/webp/kefufushijiezong-1.webp',
+    '/img/map/map-ysm.webp',
+    '/img/webp/yushenmian-1.webp',
+    '/img/webp/yushenmian-line1.webp',
+    '/img/map/map-yz.webp',
+    '/img/webp/yazhang-1.webp',
+    '/img/map/map-yg.webp',
+    '/img/webp/yuge-1.webp',
+    '/img/map/map-whlp.webp',
+    '/img/webp/wuhuanglianpei-1.webp',
+    '/img/map/map-swczyp.webp',
+    '/img/webp/yuzupei-1.webp',
+    '/img/map/map-tdxryds.webp',
+    '/img/webp/tdxryds-1.webp',
+    '/img/map/map-yzun.webp',
+    '/img/webp/yuzun-1.webp',
+    '/img/map/map-yljbxd.webp',
+    '/img/webp/yljbdd-1.webp',
+    '/img/map/map-yljbxd.webp',
+    '/img/webp/yljbdd-1.webp',
+    '/img/map/map-cstydhg.webp',
+    '/img/webp/cstythg-1.webp',
+    '/img/webp/qbyteh-1.webp',
+    '/img/map/map-qbyteh.webp',
+    '/img/map/map-tshdzb.webp',
+    '/img/webp/tshdzb-1.webp',
+    '/img/webp/ewm-yy.webp',
+    '/img/webp/ewm-yrzh.webp',
+    '/img/webp/ewm-wx.webp',
+]