图片加载事件增加请求开始的回调，以及修复有缓存时，没有回调的bug
Signed-off-by: madixin <madixin@huawei.com>
This commit is contained in:
madixin
parent
f26f96fd2f
commit
7acce8276a
|
|
@ -1,5 +1,6 @@
|
|||
## 3.0.0-rc.5
|
||||
- 修复可视化代码逻辑
|
||||
- 图片加载事件增加请求开始的回调,以及修复有缓存时，没有回调的bug
|
||||
- 修复对已销毁组件不再下发请求的逻辑
|
||||
|
||||
## 3.0.0-rc.4
|
||||
- 支持hsp多包图片资源
|
||||
|
|
|
|||
38
README.md
38
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<HeaderOptions> | 设置请求头（可选） |
|
||||
| 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<HeaderOptions> | 设置请求头（可选） |
|
||||
| transformation | PixelMapTransformation | 图片变换（可选） |
|
||||
| onLoadListener | onLoadStart: () => void、onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 |
|
||||
|
||||
### ImageKnife接口
|
||||
|
||||
|
|
|
|||
|
|
@ -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%')
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -65,7 +65,15 @@ export class ImageKnifeOption {
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 请求回调
|
||||
*/
|
||||
export interface OnLoadCallBack {
|
||||
// 请求开始
|
||||
onLoadStart?: () => void;
|
||||
// 请求成功
|
||||
onLoadSuccess?: (data: string | PixelMap | undefined) => void;
|
||||
// 请求结束
|
||||
onLoadFailed?: (err: string) => void;
|
||||
}
|
||||
Loading…
Reference in New Issue