快速加载

src/views/coursewarePlay/component/musicScore.tsx

@@ -14,7 +14,7 @@ export default defineComponent({
       type: Object,
       default: () => {}
     },
-    activeModel:{
+    activeModel: {
       type: Boolean
     }
   },
@@ -24,11 +24,12 @@ export default defineComponent({
     const pageVisibility = usePageVisibility()
     /** 页面显示和隐藏 */
     watch(pageVisibility, (value) => {
-      if(value == 'hidden'){
+      if (value == 'hidden') {
         isLoading.value = false
       }
     })
     const iframeRef = ref()
+    const isLoaded = ref(false)
     const renderError = ref(false)
     const renderSuccess = ref(false)
     const Authorization = sessionStorage.getItem('Authorization') || ''
@@ -62,10 +63,10 @@ export default defineComponent({
 
     // 去云教练完整版
     const gotoAccomany = () => {
-      if (isLoading.value) return;
+      if (isLoading.value) return
       isLoading.value = true
       const parmas = qs.stringify({
-        id:  props.music.content,
+        id: props.music.content
       })
       let src = `${location.origin}/orchestra-music-score/?` + parmas
       postMessage({
@@ -82,31 +83,32 @@ export default defineComponent({
 
     return () => (
       <div class={styles.musicScore}>
-        {renderError.value ? (
-          <div class={styles.errorModel}>
-            <OEmpty type="network" tips="请检查网络环境" />
-          </div>
-        ) : (
-          <>
-            <iframe
-              ref={iframeRef}
-              onLoad={(e: Event) => {
-                emit('setIframe', iframeRef.value)
-              }}
-              class={[styles.container, 'musicIframe']}
-              frameborder="0"
-              src={src}
-            ></iframe>
-            <div style={{
+        <iframe
+          ref={iframeRef}
+          onLoad={(e: Event) => {
+            emit('setIframe', iframeRef.value)
+            isLoaded.value = true
+          }}
+          class={[styles.container, 'musicIframe']}
+          frameborder="0"
+          src={src}
+        ></iframe>
+        {isLoaded.value && (
+          <div
+            style={{
               display: props.activeModel ? '' : 'none'
-            }} class={styles.startBtn} onClick={(e: Event) => {
+            }}
+            class={styles.startBtn}
+            onClick={(e: Event) => {
               e.stopPropagation()
               gotoAccomany()
-            }}>
-              <img src={iconStart} />
-              {isLoading.value && <Loading class={styles.loading} color="rgba(63,134,237,1)" size={16} />}
-            </div>
-          </>
+            }}
+          >
+            <img src={iconStart} />
+            {isLoading.value && (
+              <Loading class={styles.loading} color="rgba(63,134,237,1)" size={16} />
+            )}
+          </div>
         )}
       </div>
     )