lynx: requestResourcePrefetch() static method#

import { useState, useEffect } from '@lynx-js/react';

function Page() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    // 在页面 DidMount 时我们提前发起资源预加载
    // 我们需要预加载一批资源，包括两张图片和两段视频。
    // 首先准备好资源参数，给图片指定 priority 和 cacheTarget，给视频指定必需的 preloadKey。
    let resData = [
      {
        uri: 'https://xxxxx1.jpg',
        type: 'image',
        params: { priority: 'high', cacheTarget: 'disk' },
      },
      {
        uri: 'https://xxxxx2.jpg',
        type: 'image',
        params: { cacheTarget: 'bitmap' },
      },
      {
        uri: 'https://zzzzz1.mp4',
        type: 'video',
        params: { preloadKey: 'zzzzz1' },
      },
      {
        uri: 'https://zzzzz2.mp4',
        type: 'video',
        params: { preloadKey: 'zzzzz2' },
      },
    ];

    // 调用 requestResourcePrefetch 发起预加载
    lynx.requestResourcePrefetch?.(
      {
        data: resData,
      },
      (res) => {
        if (res.code == 0) {
          console.log('success!');
        } else {
          console.log('fail! ', res.msg);
        }
        console.log(
          'prefetch status of each resource:',
          JSON.stringify(res.details),
        );
      },
    );
  }, []);

  const handleTap = () => {
    // 通过setShow改变show状态，控制图片、视频的展示
    setShow(!show);
  };

  return (
    <view onTap={handleTap}>
      {/* 根据 show 状态来决定是否展示图片，注意这里 src 是上述的唯一的 key，这里应该保持 src 和预加载时一致 */}
      {show && <image src="https://xxxxx1.jpg" />}
      {show && <image src="https://xxxxx2.jpg" />}
      {/* 根据 show 状态来决定是否展示视频，注意这里 preload-key 是上述唯一的 key，这里应该保持 preload-key 和预加载时一致 */}
      {show && <view-pro src="https://zzzzz1.mp4" preload-key="zzzzz1" />}
      {show && <view-pro src="https://zzzzz2.mp4" preload-key="zzzzz2" />}
    </view>
  );
}

export default Page;