@conecli/cone-render 0.10.1-shop3.123 → 0.10.1-shop3.124

package/dist/components/base/LazyLoadImage/index.h5.tsx

@@ -1 +1 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
  getQualityImage,
  isH5AndJdShopView,
  isChartH5,
  isH5AndJdShopViewH5Scroll,
  isAppStowShop,
  getSgmCustomCode,
  isImageOptimizeEnable,
  getAvifSupport,
  getWebpSupport,
  draBusinessCustomReport
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAKSURBVHicY2QAAAAEAAIhZK1qAAAAAElFTkSuQmCC'
  'https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png'
  const styleSheets = document.styleSheets
  const internalStyleSheets = []
  for (let i = 0; i < styleSheets.length; i++) {
    const sheet = styleSheets[i]
    const ownerNode = sheet.ownerNode
    if (ownerNode && ownerNode.nodeName === 'STYLE') {
      internalStyleSheets.push(sheet)
    }
  }
  console.warn(
    '🚗 ~~ file: index.h5.tsx:47 ~~ getRuleBySelector() ~~ selector:',
    selector,
  )
  for (let i = 0; i < internalStyleSheets.length; i++) {
    try {
      const sheet = internalStyleSheets[i]
      const rules = sheet.cssRules || sheet.rules 
      for (const rule of rules) {
        if (rule?.selectorText?.match(new RegExp(selector + '$'))) {
          return rule 
        }
      }
    } catch (e) {
      console.warn('因安全限制无法访问样式表:', e)
    }
  }
  return null 
  const {
    src = null,
    lazyLoad = true, 
    imagRenderingSet = true, 
    width = null,
    height = null,
    className = null, 
    isSkuImage = false,
    hideErrorImage = false, 
    style = null, 
    backgroundColor = null, 
    errorSrc = null, 
    onLoad = null, 
    onError = null, 
    sizeScale = 1, 
    ...otherOption
  } = props
  getNetWorkType === NetWorkTypeQuality.default &&
  (getNetWorkType = global.info.sysInfo.netWorkType)
  const [loadSuccess, setLoadSuccess] = useState(false)
  const [imageErrState, setImageErrState] = useState(false)
  const [componentShowState, setComponentShowState] = useState(false)
  const measureRef = useRef<HTMLElement | null>(null)
  const [measureComplete, setMeasureComplete] = useState(false)
  const [imgSrc, setImgSrc] = useState(src)
  const [hasRetrySuccess, setHasRetrySuccess] = useState(false) 
  const hasRetryRef = useRef(false) 
  const componentShowStateRef = useRef(false)
  const requestSrcRef = useRef(src)
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(
      global.info.queryInfo?.downgraded &&
      global.info.queryInfo.downgraded === 'true'
    )
  const enableAvifOptimize = isImageOptimizeEnable()
  const isVipShop = global?.info?.pageInfo?.isVipShop
  const avifSupport = getAvifSupport()
  const webpSupport = getWebpSupport()
  
  const getRequestSrc = useCallback(
      (src) => {
        const requestSrc = getQualityImage(imgSrc, {
          isSkuImage,
          size: measureRef?.current?.getBoundingClientRect()?.width,
          sizeScale
        })
        requestSrcRef.current = requestSrc
        return requestSrc
      },
      [src],
    )
  
  const imageErrorRetry = (src) => {
    return new Promise((resolve, reject) => {
      if (fetch && window && window.Image) {
        fetch(src)
          .then((response) => {
            const { ok, status } = response
            if (ok) {
              const originUrl = src.replace(/\.(jpe?g|png).*/, '.$1')
              response
                .blob()
                .then((blob) => {
                  if (URL) {
                    const url = URL.createObjectURL(blob)
                    const img = new window.Image()
                    img.src = url
                    img.onload = () => {
                      reportSGM({
                        status,
                        text: '再次请求并且onload了',
                        type: 'retryAndOnload',
                        requestSrc: src,
                        resolveUrl: url,
                      })
                      resolve({
                        ok: true,
                        url,
                      })
                      setTimeout(() => {
                        URL.revokeObjectURL(url)
                      }, 2000)
                    }
                    img.onerror = () => {
                      reportSGM({
                        status,
                        text: '图片解析异常',
                        type: 'imageParseError',
                        requestSrc: src,
                      })
                      URL.revokeObjectURL(url)
                      resolve({
                        ok: true,
                        url: originUrl,
                      })
                    }
                  } else {
                    resolve({
                      ok: true,
                      url: originUrl,
                    })
                  }
                })
                .catch((error) => {
                  resolve({
                    ok: true,
                    url: originUrl,
                  })
                  console.error('LazyLoadImage imageErrorRetry() error:', error)
                })
            } else {
              if (status === 404) {
                resolve({
                  ok: false,
                  text: '访问图片不存在',
                  type: 'noSuchUrlImage',
                })
              } else {
                resolve({
                  ok: false,
                  status: status, 
                  text: '其它图片问题',
                  type: 'otherImageError',
                })
              }
            }
          })
          .catch((error) => {
            resolve({
              ok: false,
              text: '网络异常',
              type: 'networkError',
            })
            console.error('LazyLoadImage imageErrorRetry() error:', error)
          })
      } else {
        resolve({
          ok: false,
          text: '不支持重试',
          type: 'notSupportRetry',
        })
      }
    })
  }
  
  const reportSGM = ({
                       status,
                       text,
                       type,
                       requestSrc = imgSrc,
                       resolveUrl = '',
                     }) => {
    const { shopId, venderId } = global.info.queryInfo || {}
    draBusinessCustomReport({
      eventName: 'business',
      errorName: getSgmCustomCode(`${SgmCustomCode.IMAGE_LOAD}_${type}`),
      errorMessage: '图片加载失败异常',
      extraData: JSON.stringify({
        avifSupport,
        webpSupport,
        shopId,
        venderId,
        originSrc: src,
        requestSrc,
        resolveUrl,
        status,
        text,
      }),
    })
  }
  const imageErrorHandle = useCallback(
    (e) => {
      console.log(' ==============> 图片加载错误', e)
      if (!hasRetryRef.current) {
        hasRetryRef.current = true
        if (src) {
          try {
            imageErrorRetry(requestSrcRef.current).then((result) => {
              const { status, ok, text, type, url } = result || {}
              if (ok) {
                setImgSrc(url)
                setHasRetrySuccess(true)
              } else {
                errorSrc && setImgSrc(errorSrc)
                hideErrorImage && setImageErrState(true)
                typeof onError === 'function' && onError(e, src, props)
                reportSGM({
                  status,
                  text,
                  type,
                  requestSrc: requestSrcRef.current,
                })
              }
            })
          } catch (e) {
            console.error('LazyLoadImage imageErrorHandle() error:', e)
            errorSrc && setImgSrc(errorSrc)
            hideErrorImage && setImageErrState(true)
            typeof onError === 'function' && onError(e, src, props)
          }
        }
      } else {
        reportSGM({
          status: '',
          text: '渲染原始图片渲染异常',
          type: 'renderOriginImageError',
        })
        if (imgSrc.includes('blob:')) {
          reportSGM({
            status: '',
            text: '渲染本地blob图片异常',
            type: 'renderBlobImageError',
          })
        } else {
          reportSGM({
            status: '',
            text: '渲染本地非blob图片异常',
            type: 'renderNoBlobImageError',
          })
        }
      }
    },
    [src, hasRetryRef.current],
  )
  
  const imageLoad = useCallback(
    (_src, event) => {
      setLoadSuccess(true)
      typeof onLoad === 'function' && onLoad(event, src, props)
    },
    [src],
  )
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {}
    width && (changeStyle['width'] = width)
    height && (changeStyle['height'] = height)
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
    return changeStyle
  }
  useEffect(() => {
    try {
      const { mode } = otherOption
      if (mode && mode === 'heightFix') {
        className?.split(/\s/)?.forEach((item) => {
          const userDefinedClass = getRuleBySelector('.' + item)
          const userDefinedHeight = userDefinedClass?.style?.height
          if (userDefinedHeight === '' || userDefinedHeight === 'auto') {
            console.warn(
              "🚗 ~~ 发现一例用户使用图片组件设置了 mode='heightFix' 并且没有定义一个具体高度:",
              userDefinedHeight,
              {
                code: getSgmCustomCode(`imageUsageCheck`),
                msg: {
                  userDefinedClass: item,
                  userDefinedHeight,
                },
              },
            )
            draBusinessCustomReport({
              eventName: 'business',
              errorName: getSgmCustomCode(`imageUsageCheck`),
              errorMessage: JSON.stringify({
                userDefinedClass: item,
                userDefinedHeight,
              }),
            })
          }
        })
      }
    } catch (e) {
      console.warn('imageUsageCheck error:', e)
    }
    setMeasureComplete(true)
    if (needShowHighVersion) return
    const latestRes =
      latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    !componentShowStateRef.current && dealPageScrollInfo(latestRes)
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
      !componentShowStateRef.current && dealPageScrollInfo(res)
    })
  }, [])
  
  const dealPageScrollInfo = (res) => {
    const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined')
      return
    if (measureRef.current) {
      const eleClientRect = measureRef.current.getBoundingClientRect()
      const getContainerHeightOffSetY = displayHeight * 1.5 + offSetY 
      const eleOffsetTop = Math.ceil(eleClientRect.top)
      const eleOffsetHeight = Math.ceil(eleClientRect.height)
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true
          setComponentShowState(true)
        }
      }
    }
  }
  return isH5AndJdShopView &&
  global?.config?.needImageLazy !== false &&
  !needShowHighVersion &&
  !isAppStowShop ? (
    <View
      ref={measureRef}
      className={classNames(
        imageStyle['d-app-lazy-image'],
        {
          [imageStyle['d-lazy-sku-image']]: isSkuImage,
        },
        {
          [imageStyle['d-hide-image-error']]: imageErrState,
        },
        {
          [imageStyle['d-load-completed']]: loadSuccess,
        },
        {
          'd-imag-rendering-crisp-edges':
            !isVipShop && imagRenderingSet,
        },
        'J_html5ImageBg',
        className,
      )}
      style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
      }}
      {...otherOption}
    >
      {(componentShowState || lazyLoad === false) && (
        <img
          src={getQualityImage(
            imgSrc,
            isVipShop
              ? NetWorkTypeQuality['perfect']
              : NetWorkTypeQuality[getNetWorkType],
          )}
          onLoad={imageLoad.bind(this, imgSrc)}
          onError={imageErrorHandle}
        />
      )}
    </View>
  ) : enableAvifOptimize ? (
    [
      measureComplete ? (
        <Image
          key={hasRetrySuccess ? 'realImageRetry' : 'realImage'}
          style={{
            ...style,
            ...changeStyleIncludeWidthAndHeightAndBgColor(),
          }}
          className={classNames(
            imageStyle['d-lazy-image'],
            {
              [imageStyle['d-lazy-sku-image']]: isSkuImage,
            },
            {
              [imageStyle['d-hide-image-error']]: imageErrState,
            },
            {
              [imageStyle['d-load-completed']]: loadSuccess,
            },
            {
              'd-imag-rendering-crisp-edges': imagRenderingSet,
            },
            {
              [imageStyle["d-no-jd-dog"]]: isVipShop && !isSkuImage,
            },
            className,
          )}
          src={hasRetrySuccess ? imgSrc : getRequestSrc(imgSrc)}
          lazyLoad={isChartH5 ? false : lazyLoad}
          onError={imageErrorHandle}
          onLoad={imageLoad.bind(this, imgSrc)}
          {...otherOption}
        />
      ) : (
        <Image
          key="defaultImage"
          style={{
            ...style,
            ...changeStyleIncludeWidthAndHeightAndBgColor(),
          }}
          className={classNames(
            imageStyle['d-lazy-image'],
            {
              [imageStyle['d-lazy-sku-image']]: isSkuImage,
            },
            {
              [imageStyle['d-hide-image-error']]: imageErrState,
            },
            {
              [imageStyle['d-load-completed']]: loadSuccess,
            },
            {
              'd-imag-rendering-crisp-edges': imagRenderingSet,
            },
            {
              [imageStyle["d-no-jd-dog"]]: isVipShop && !isSkuImage,
            },
            className,
          )}
          src={isSkuImage ? DEFAULT_SKU_SRC : DEFAULT_SRC}
        />
      ),
      loadSuccess ? null : <View key="measureRef" ref={measureRef}></View>,
    ]
  ) : (
    <Image
      style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
      }}
      className={classNames(
        imageStyle['d-lazy-image'],
        {
          [imageStyle['d-lazy-sku-image']]: isSkuImage,
        },
        {
          [imageStyle['d-hide-image-error']]: imageErrState,
        },
        {
          [imageStyle['d-load-completed']]: loadSuccess,
        },
        {
          'd-imag-rendering-crisp-edges': imagRenderingSet,
        },
        className,
      )}
      src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
      lazyLoad={isChartH5 ? false : lazyLoad}
      onError={imageErrorHandle}
      onLoad={imageLoad.bind(this, imgSrc)}
      {...otherOption}
    />
  )
+import React, { useCallback, useEffect, useRef, useState } from 'react';
  getQualityImage,
  isH5AndJdShopView,
  isChartH5,
  isH5AndJdShopViewH5Scroll,
  isAppStowShop,
  getSgmCustomCode,
  isImageOptimizeEnable,
  getAvifSupport,
  getWebpSupport,
  draBusinessCustomReport,
  getNativePageScrollRes,
  latestFromNativeMsgStorage,
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAAAKSURBVHicY2QAAAAEAAIhZK1qAAAAAElFTkSuQmCC';
  'https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png';
  const styleSheets = document.styleSheets;
  const internalStyleSheets = [];
  for (let i = 0; i < styleSheets.length; i++) {
    const sheet = styleSheets[i];
    const ownerNode = sheet.ownerNode;
    if (ownerNode && ownerNode.nodeName === 'STYLE') {
      internalStyleSheets.push(sheet);
    }
  }
  console.warn('🚗 ~~ file: index.h5.tsx:47 ~~ getRuleBySelector() ~~ selector:', selector);
  for (let i = 0; i < internalStyleSheets.length; i++) {
    try {
      const sheet = internalStyleSheets[i];
      const rules = sheet.cssRules || sheet.rules; 
      for (const rule of rules) {
        if (rule?.selectorText?.match(new RegExp(selector + '$'))) {
          return rule; 
        }
      }
    } catch (e) {
      console.warn('因安全限制无法访问样式表:', e);
    }
  }
  return null; 
  const {
    src = null,
    lazyLoad = true, 
    imagRenderingSet = true, 
    width = null,
    height = null,
    className = null, 
    isSkuImage = false,
    hideErrorImage = false, 
    style = null, 
    backgroundColor = null, 
    errorSrc = null, 
    onLoad = null, 
    onError = null, 
    sizeScale = 1, 
    loadType = undefined, 
    ...otherOption
  } = props;
  getNetWorkType === NetWorkTypeQuality.default &&
    (getNetWorkType = global.info.sysInfo.netWorkType);
  const [loadSuccess, setLoadSuccess] = useState(false);
  const [imageErrState, setImageErrState] = useState(false);
  const [componentShowState, setComponentShowState] = useState(false);
  const measureRef = useRef<HTMLElement | null>(null);
  const [measureComplete, setMeasureComplete] = useState(false);
  const [imgSrc, setImgSrc] = useState(src);
  const [hasRetrySuccess, setHasRetrySuccess] = useState(false); 
  const hasRetryRef = useRef(false); 
  const componentShowStateRef = useRef(false);
  const requestSrcRef = useRef(src);
  const needShowHighVersion =
    isH5AndJdShopViewH5Scroll &&
    !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === 'true');
  const enableAvifOptimize = isImageOptimizeEnable();
  const isVipShop = global?.info?.pageInfo?.isVipShop;
  const avifSupport = getAvifSupport();
  const webpSupport = getWebpSupport();
  const nativeImgFlag = useRef(''); 
  
  const getRequestSrc = useCallback(
    (src) => {
      let requestSrc = getQualityImage(imgSrc, {
        isSkuImage,
        size: measureRef?.current?.getBoundingClientRect()?.width,
        sizeScale,
      });
      requestSrcRef.current = requestSrc; 
      if (loadType === LoadType.hybrid) {
        requestSrc = requestSrc
          .replace('http://', 'hybridimg://')
          .replace('https://', 'hybridimg://');
        nativeImgFlag.current = requestSrc;
      }
      return requestSrc;
    },
    [src],
  );
  
  const imageErrorRetry = (src) => {
    return new Promise((resolve, reject) => {
      if (fetch && window && window.Image) {
        fetch(src)
          .then((response) => {
            const { ok, status } = response;
            if (ok) {
              const originUrl = src.replace(/\.(jpe?g|png).*/, '.$1');
              response
                .blob()
                .then((blob) => {
                  if (URL) {
                    const url = URL.createObjectURL(blob);
                    const img = new window.Image();
                    img.src = url;
                    img.onload = () => {
                      reportSGM({
                        status,
                        text: '再次请求并且onload了',
                        type: 'retryAndOnload',
                        requestSrc: src,
                        resolveUrl: url,
                      });
                      resolve({
                        ok: true,
                        url,
                      });
                      setTimeout(() => {
                        URL.revokeObjectURL(url);
                      }, 2000);
                    };
                    img.onerror = () => {
                      reportSGM({
                        status,
                        text: '图片解析异常',
                        type: 'imageParseError',
                        requestSrc: src,
                      });
                      URL.revokeObjectURL(url);
                      resolve({
                        ok: true,
                        url: originUrl,
                      });
                    };
                  } else {
                    resolve({
                      ok: true,
                      url: originUrl,
                    });
                  }
                })
                .catch((error) => {
                  resolve({
                    ok: true,
                    url: originUrl,
                  });
                  console.error('LazyLoadImage imageErrorRetry() error:', error);
                });
            } else {
              if (status === 404) {
                resolve({
                  ok: false,
                  text: '访问图片不存在',
                  type: 'noSuchUrlImage',
                });
              } else {
                resolve({
                  ok: false,
                  status: status, 
                  text: '其它图片问题',
                  type: 'otherImageError',
                });
              }
            }
          })
          .catch((error) => {
            resolve({
              ok: false,
              text: '网络异常',
              type: 'networkError',
            });
            console.error('LazyLoadImage imageErrorRetry() error:', error);
          });
      } else {
        resolve({
          ok: false,
          text: '不支持重试',
          type: 'notSupportRetry',
        });
      }
    });
  };
  
  const reportSGM = ({ status, text, type, requestSrc = imgSrc, resolveUrl = '' }) => {
    const { shopId, venderId } = global.info.queryInfo || {};
    draBusinessCustomReport({
      eventName: 'business',
      errorName: getSgmCustomCode(`${SgmCustomCode.IMAGE_LOAD}_${type}`),
      errorMessage: '图片加载失败异常',
      extraData: JSON.stringify({
        avifSupport,
        webpSupport,
        shopId,
        venderId,
        originSrc: src,
        requestSrc,
        resolveUrl,
        status,
        text,
      }),
    });
  };
  const imageErrorHandle = useCallback(
    (e) => {
      console.log(' ==============> 图片加载错误', e);
      if (nativeImgFlag.current) {
        draBusinessCustomReport({
          eventName: 'business',
          errorName: 'jdapp_initCheckNativeImg_ImgLoad_catch_err',
          errorMessage: '松果app内图片原生加载过程catch异常, 触发https请求重试不阻塞页面',
          extraData: JSON.stringify({
            e,
            currentSrc: nativeImgFlag.current,
          }),
        });
      }
      if (!hasRetryRef.current) {
        hasRetryRef.current = true;
        if (src) {
          try {
            imageErrorRetry(requestSrcRef.current).then((result) => {
              const { status, ok, text, type, url } = result || {};
              if (ok) {
                setImgSrc(url);
                setHasRetrySuccess(true);
              } else {
                errorSrc && setImgSrc(errorSrc);
                hideErrorImage && setImageErrState(true);
                typeof onError === 'function' && onError(e, src, props);
                reportSGM({
                  status,
                  text,
                  type,
                  requestSrc: requestSrcRef.current,
                });
              }
            });
          } catch (e) {
            console.error('LazyLoadImage imageErrorHandle() error:', e);
            errorSrc && setImgSrc(errorSrc);
            hideErrorImage && setImageErrState(true);
            typeof onError === 'function' && onError(e, src, props);
          }
        }
      } else {
        reportSGM({
          status: '',
          text: '渲染原始图片渲染异常',
          type: 'renderOriginImageError',
        });
        if (imgSrc.includes('blob:')) {
          reportSGM({
            status: '',
            text: '渲染本地blob图片异常',
            type: 'renderBlobImageError',
          });
        } else {
          reportSGM({
            status: '',
            text: '渲染本地非blob图片异常',
            type: 'renderNoBlobImageError',
          });
        }
      }
    },
    [src, hasRetryRef.current],
  );
  
  const imageLoad = useCallback(
    (_src, event) => {
      setLoadSuccess(true);
      typeof onLoad === 'function' && onLoad(event, src, props);
    },
    [src],
  );
  
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
    const changeStyle = {};
    width && (changeStyle['width'] = width);
    height && (changeStyle['height'] = height);
    backgroundColor && (changeStyle['backgroundColor'] = backgroundColor);
    return changeStyle;
  };
  useEffect(() => {
    try {
      const { mode } = otherOption;
      if (mode && mode === 'heightFix') {
        className?.split(/\s/)?.forEach((item) => {
          const userDefinedClass = getRuleBySelector('.' + item);
          const userDefinedHeight = userDefinedClass?.style?.height;
          if (userDefinedHeight === '' || userDefinedHeight === 'auto') {
            console.warn(
              "🚗 ~~ 发现一例用户使用图片组件设置了 mode='heightFix' 并且没有定义一个具体高度:",
              userDefinedHeight,
              {
                code: getSgmCustomCode(`imageUsageCheck`),
                msg: {
                  userDefinedClass: item,
                  userDefinedHeight,
                },
              },
            );
            draBusinessCustomReport({
              eventName: 'business',
              errorName: getSgmCustomCode(`imageUsageCheck`),
              errorMessage: JSON.stringify({
                userDefinedClass: item,
                userDefinedHeight,
              }),
            });
          }
        });
      }
    } catch (e) {
      console.warn('imageUsageCheck error:', e);
    }
    setMeasureComplete(true);
    if (needShowHighVersion) return;
    const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {};
    !componentShowStateRef.current && dealPageScrollInfo(latestRes);
    Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
      !componentShowStateRef.current && dealPageScrollInfo(res);
    });
  }, []);
  
  const dealPageScrollInfo = (res) => {
    const { displayHeight, offSetY } = getNativePageScrollRes(res) || {};
    if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return;
    if (measureRef.current) {
      const eleClientRect = measureRef.current.getBoundingClientRect();
      const getContainerHeightOffSetY = displayHeight * 1.5 + offSetY; 
      const eleOffsetTop = Math.ceil(eleClientRect.top);
      const eleOffsetHeight = Math.ceil(eleClientRect.height);
      if (!componentShowStateRef.current) {
        if (getContainerHeightOffSetY > eleOffsetTop) {
          componentShowStateRef.current = true;
          setComponentShowState(true);
        }
      }
    }
  };
  return isH5AndJdShopView &&
    global?.config?.needImageLazy !== false &&
    !needShowHighVersion &&
    !isAppStowShop ? (
    <View
      ref={measureRef}
      className={classNames(
        imageStyle['d-app-lazy-image'],
        {
          [imageStyle['d-lazy-sku-image']]: isSkuImage,
        },
        {
          [imageStyle['d-hide-image-error']]: imageErrState,
        },
        {
          [imageStyle['d-load-completed']]: loadSuccess,
        },
        {
          'd-imag-rendering-crisp-edges': !isVipShop && imagRenderingSet,
        },
        'J_html5ImageBg',
        className,
      )}
      style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
      }}
      {...otherOption}
    >
      {(componentShowState || lazyLoad === false) && (
        <img
          src={getQualityImage(
            imgSrc,
            isVipShop ? NetWorkTypeQuality['perfect'] : NetWorkTypeQuality[getNetWorkType],
          )}
          onLoad={imageLoad.bind(this, imgSrc)}
          onError={imageErrorHandle}
        />
      )}
    </View>
  ) : enableAvifOptimize ? (
    [
      measureComplete ? (
        <Image
          key={hasRetrySuccess ? 'realImageRetry' : 'realImage'}
          style={{
            ...style,
            ...changeStyleIncludeWidthAndHeightAndBgColor(),
          }}
          className={classNames(
            imageStyle['d-lazy-image'],
            {
              [imageStyle['d-lazy-sku-image']]: isSkuImage,
            },
            {
              [imageStyle['d-hide-image-error']]: imageErrState,
            },
            {
              [imageStyle['d-load-completed']]: loadSuccess,
            },
            {
              'd-imag-rendering-crisp-edges': imagRenderingSet,
            },
            {
              [imageStyle['d-no-jd-dog']]: isVipShop && !isSkuImage,
            },
            className,
          )}
          src={hasRetrySuccess ? imgSrc : getRequestSrc(imgSrc)}
          lazyLoad={isChartH5 ? false : lazyLoad}
          onError={imageErrorHandle}
          onLoad={imageLoad.bind(this, imgSrc)}
          {...otherOption}
        />
      ) : (
        <Image
          key="defaultImage"
          style={{
            ...style,
            ...changeStyleIncludeWidthAndHeightAndBgColor(),
          }}
          className={classNames(
            imageStyle['d-lazy-image'],
            {
              [imageStyle['d-lazy-sku-image']]: isSkuImage,
            },
            {
              [imageStyle['d-hide-image-error']]: imageErrState,
            },
            {
              [imageStyle['d-load-completed']]: loadSuccess,
            },
            {
              'd-imag-rendering-crisp-edges': imagRenderingSet,
            },
            {
              [imageStyle['d-no-jd-dog']]: isVipShop && !isSkuImage,
            },
            className,
          )}
          src={isSkuImage ? DEFAULT_SKU_SRC : DEFAULT_SRC}
        />
      ),
      loadSuccess ? null : <View key="measureRef" ref={measureRef}></View>,
    ]
  ) : (
    <Image
      style={{
        ...style,
        ...changeStyleIncludeWidthAndHeightAndBgColor(),
      }}
      className={classNames(
        imageStyle['d-lazy-image'],
        {
          [imageStyle['d-lazy-sku-image']]: isSkuImage,
        },
        {
          [imageStyle['d-hide-image-error']]: imageErrState,
        },
        {
          [imageStyle['d-load-completed']]: loadSuccess,
        },
        {
          'd-imag-rendering-crisp-edges': imagRenderingSet,
        },
        className,
      )}
      src={getQualityImage(imgSrc, NetWorkTypeQuality[getNetWorkType])}
      lazyLoad={isChartH5 ? false : lazyLoad}
      onError={imageErrorHandle}
      onLoad={imageLoad.bind(this, imgSrc)}
      {...otherOption}
    />
  );