diff --git a/CHANGELOG.md b/CHANGELOG.md index 463ccf8..3715d2f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## 3.0.0-rc.5 -- 修复可视化代码逻辑 +- 图片加载事件增加请求开始的回调,以及修复有缓存时，没有回调的bug +- 修复对已销毁组件不再下发请求的逻辑 ## 3.0.0-rc.4 - 支持hsp多包图片资源 diff --git a/README.md b/README.md index 4396581..5edb702 100644 --- a/README.md +++ b/README.md @@ -152,25 +152,25 @@ ImageKnifeComponent({ ImageKnifeOption: ### ImageKnifeOption参数列表 -| 参数名称 | 入参内容 | 功能简介 | -|-----------------------|---------------------------------------------------|-----------------| -| loadSrc | string、PixelMap、Resource | 主图展示 | -| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） | -| errorholderSrc | PixelMap、Resource | 错误图展示（可选） | -| objectFit | ImageFit | 主图填充效果（可选） | -| placeholderObjectFit | ImageFit | 占位图填充效果（可选） | -| errorholderObjectFit | ImageFit | 错误图填充效果（可选） | -| writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) | -| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） | -| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 | -| border | BorderOptions | 边框圆角（可选） | -| priority | taskpool.Priority | 加载优先级（可选） | -| context | common.UIAbilityContext | 上下文（可选） | -| progressListener | (progress: number)=>void | 进度（可选） | -| signature | String | 自定义缓存关键字（可选） | -| headerOption | Array | 设置请求头（可选） | -| transformation | PixelMapTransformation | 图片变换（可选） | -| onLoadListener | onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 | +| 参数名称 | 入参内容 | 功能简介 | +|-----------------------|-------------------------------------------------------|-----------------| +| loadSrc | string、PixelMap、Resource | 主图展示 | +| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） | +| errorholderSrc | PixelMap、Resource | 错误图展示（可选） | +| objectFit | ImageFit | 主图填充效果（可选） | +| placeholderObjectFit | ImageFit | 占位图填充效果（可选） | +| errorholderObjectFit | ImageFit | 错误图填充效果（可选） | +| writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) | +| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） | +| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 | +| border | BorderOptions | 边框圆角（可选） | +| priority | taskpool.Priority | 加载优先级（可选） | +| context | common.UIAbilityContext | 上下文（可选） | +| progressListener | (progress: number)=>void | 进度（可选） | +| signature | String | 自定义缓存关键字（可选） | +| headerOption | Array | 设置请求头（可选） | +| transformation | PixelMapTransformation | 图片变换（可选） | +| onLoadListener | onLoadStart: () => void、onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 | ### ImageKnife接口 diff --git a/entry/src/main/ets/pages/LoadStatePage.ets b/entry/src/main/ets/pages/LoadStatePage.ets index 6f7590b..d12051d 100644 --- a/entry/src/main/ets/pages/LoadStatePage.ets +++ b/entry/src/main/ets/pages/LoadStatePage.ets @@ -18,7 +18,9 @@ import matrix4 from '@ohos.matrix4' @Entry @Component struct LoadStatePage { - @State matrix1: object = matrix4.identity().scale({ x: 1, y: 1 }) + + starTime:number = new Date().getTime() + @State ImageKnifeOption: ImageKnifeOption = { loadSrc: $r("app.media.rabbit"), placeholderSrc: $r("app.media.loading"), @@ -48,11 +50,15 @@ struct LoadStatePage { errorholderSrc: $r("app.media.app_icon"), objectFit: ImageFit.Contain, onLoadListener: { + onLoadStart:()=>{ + this.starTime = new Date().getTime() + console.info("Load start: "); + }, onLoadFailed: (err) => { - console.error("Load Failed Reason: " + err); + console.error("Load Failed Reason: " + err + " cost " + (new Date().getTime() - this.starTime) + " milliseconds"); }, onLoadSuccess: (data) => { - console.info("Load Successful: " + data); + console.info("Load Successful: cost " + (new Date().getTime() - this.starTime) + " milliseconds"); return data; }, }, @@ -63,7 +69,6 @@ struct LoadStatePage { .margin({ top: 20 }) ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200) - .transform(this.matrix1) .margin({ top: 20 }) } @@ -71,4 +76,5 @@ struct LoadStatePage { .width('100%') .height('100%') } + } \ No newline at end of file diff --git a/library/src/main/ets/ImageKnifeDispatcher.ets b/library/src/main/ets/ImageKnifeDispatcher.ets index ce0fa19..34d5810 100644 --- a/library/src/main/ets/ImageKnifeDispatcher.ets +++ b/library/src/main/ets/ImageKnifeDispatcher.ets @@ -67,10 +67,19 @@ export class ImageKnifeDispatcher { if (memoryCache !== undefined) { // 画主图 if (request.requestState === ImageKnifeRequestState.PROGRESS) { + // 回调请求开始 + if (requestSource === ImageKnifeRequestSource.SRC && request.imageKnifeOption.onLoadListener?.onLoadStart !== undefined) { + request.imageKnifeOption.onLoadListener?.onLoadStart() + } + request.ImageKnifeRequestCallback?.showPixelMap(request.componentVersion, memoryCache.source, requestSource) if (requestSource == ImageKnifeRequestSource.SRC) { request.requestState = ImageKnifeRequestState.COMPLETE + // 回调请求开结束 + if (request.imageKnifeOption.onLoadListener?.onLoadSuccess !== undefined) { + request.imageKnifeOption.onLoadListener?.onLoadSuccess(memoryCache.source) + } } else if (requestSource == ImageKnifeRequestSource.ERROR_HOLDER) { request.requestState = ImageKnifeRequestState.ERROR } @@ -147,19 +156,28 @@ export class ImageKnifeDispatcher { }); } + // 回调请求开始 + requestList.forEach((requestWithSource: ImageKnifeRequestWithSource) => { + if (requestWithSource.source === ImageKnifeRequestSource.SRC && requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadStart !== undefined) { + requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadStart() + } + }); + + taskpool.execute(task).then((res: Object) => { let requestJobResult = res as RequestJobResult let pixelmap = requestJobResult === undefined ? undefined : requestJobResult.pixelMap if (pixelmap === undefined) { - if (currentRequest.imageKnifeOption.onLoadListener && currentRequest.imageKnifeOption.onLoadListener.onLoadFailed && requestJobResult.loadFail) { - currentRequest.imageKnifeOption.onLoadListener.onLoadFailed(requestJobResult.loadFail); - } if (requestList !== undefined) { requestList.forEach((requestWithSource: ImageKnifeRequestWithSource) => { - if (requestWithSource.source === ImageKnifeRequestSource.SRC && currentRequest.imageKnifeOption.errorholderSrc !== undefined) { + // 回调请求失败 + if (requestWithSource.source === ImageKnifeRequestSource.SRC && requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadFailed !== undefined && requestJobResult.loadFail){ + requestWithSource.request.imageKnifeOption.onLoadListener.onLoadFailed(requestJobResult.loadFail); + } + if (requestWithSource.source === ImageKnifeRequestSource.SRC && requestWithSource.request.imageKnifeOption.errorholderSrc !== undefined) { - if (this.showFromMemomry(currentRequest, currentRequest.imageKnifeOption.errorholderSrc, ImageKnifeRequestSource.ERROR_HOLDER) === false) { - this.getAndShowImage(currentRequest, currentRequest.imageKnifeOption.errorholderSrc, ImageKnifeRequestSource.ERROR_HOLDER) + if (this.showFromMemomry(currentRequest, requestWithSource.request.imageKnifeOption.errorholderSrc, ImageKnifeRequestSource.ERROR_HOLDER) === false) { + this.getAndShowImage(currentRequest, requestWithSource.request.imageKnifeOption.errorholderSrc, ImageKnifeRequestSource.ERROR_HOLDER) } } }); @@ -206,8 +224,9 @@ export class ImageKnifeDispatcher { if (requestWithSource.source == ImageKnifeRequestSource.SRC) { requestWithSource.request.requestState = ImageKnifeRequestState.COMPLETE - if (currentRequest.imageKnifeOption.onLoadListener && currentRequest.imageKnifeOption.onLoadListener.onLoadSuccess) { - currentRequest.imageKnifeOption.onLoadListener.onLoadSuccess(ImageKnifeData.source); + if (requestWithSource.request.imageKnifeOption.onLoadListener && requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess) { + // 回调请求成功 + requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess(ImageKnifeData.source); } } else if (requestWithSource.source == ImageKnifeRequestSource.ERROR_HOLDER) { requestWithSource.request.requestState = ImageKnifeRequestState.ERROR diff --git a/library/src/main/ets/ImageKnifeOption.ets b/library/src/main/ets/ImageKnifeOption.ets index 19c75da..1531896 100644 --- a/library/src/main/ets/ImageKnifeOption.ets +++ b/library/src/main/ets/ImageKnifeOption.ets @@ -65,7 +65,15 @@ export class ImageKnifeOption { } } + +/** + * 请求回调 + */ export interface OnLoadCallBack { + // 请求开始 + onLoadStart?: () => void; + // 请求成功 onLoadSuccess?: (data: string | PixelMap | undefined) => void; + // 请求结束 onLoadFailed?: (err: string) => void; } \ No newline at end of file