fix(h5): previewImage 加载图片改为异步

NervJS · May 6, 2021 · 506a4d2 · 506a4d2
1 parent b1324b7
commit 506a4d2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/packages/taro-components/src/components.d.ts b/packages/taro-components/src/components.d.ts
@@ -191,7 +191,7 @@ export namespace Components {
          */
         "duration": number;
         /**
-          * 给 prewviewImage API 使用，全屏显示 swiper
+          * 给 previewImage API 使用，全屏显示 swiper
          */
         "full": boolean;
         /**
@@ -890,7 +890,7 @@ declare namespace LocalJSX {
          */
         "duration"?: number;
         /**
-          * 给 prewviewImage API 使用，全屏显示 swiper
+          * 给 previewImage API 使用，全屏显示 swiper
          */
         "full"?: boolean;
         /**

diff --git a/packages/taro-components/src/components/swiper/swiper.tsx b/packages/taro-components/src/components/swiper/swiper.tsx
@@ -79,7 +79,7 @@ export class Swiper implements ComponentInterface {
   @Prop() displayMultipleItems = 1
 
   /**
-   * 给 prewviewImage API 使用，全屏显示 swiper
+   * 给 previewImage API 使用，全屏显示 swiper
    */
   @Prop() full = false
 

diff --git a/packages/taro-h5/src/api/image/index.js b/packages/taro-h5/src/api/image/index.js
@@ -4,4 +4,4 @@
 
 export { default as chooseImage } from './chooseImage'
 export { default as getImageInfo } from './getImageInfo'
-export { previewImage } from './preview_image'
+export { previewImage } from './previewImage'
diff --git a/...es/taro-h5/src/api/image/preview_image.js → ...ges/taro-h5/src/api/image/previewImage.js b/...es/taro-h5/src/api/image/preview_image.js → ...ges/taro-h5/src/api/image/previewImage.js
@@ -33,7 +33,9 @@ export async function previewImage (options) {
 
   let children = []
   try {
-    children = await Promise.all(urls.map(loadImage))
+    children = await Promise.all(
+      urls.map(e => loadImage(e, options.fail))
+    )
   } catch (error) {
     if (options.fail) {
       options.fail(error)
@@ -60,8 +62,8 @@ export async function previewImage (options) {
   }
 }
 
-function loadImage (url) {
-  return new Promise((resolve, reject) => {
+function loadImage (url, fail) {
+  return new Promise((resolve) => {
     const item = document.createElement('taro-swiper-item-core')
     item.style.cssText = `
       display: flex;
@@ -72,11 +74,12 @@ function loadImage (url) {
     image.style.maxWidth = '100%'
     image.src = url
     item.appendChild(image)
-    image.addEventListener('load', () => {
-      resolve(item)
-    })
-    image.addEventListener('error', (err) => {
-      reject(err)
-    })
+    // Note: 等待图片加载完后返回，会导致轮播被卡住
+    resolve(item)
+    if (typeof fail === 'function') {
+      image.addEventListener('error', (err) => {
+        fail(err)
+      })
+    }
   })
 }