diff --git a/entry/src/main/ets/pages/Header.ets b/entry/src/main/ets/pages/Header.ets
new file mode 100644
index 0000000000000000000000000000000000000000..330a3b4bc875344246515c37fe9d8b816b3a8310
--- /dev/null
+++ b/entry/src/main/ets/pages/Header.ets
@@ -0,0 +1,12 @@
+// header.ets
+@Component
+export struct Header {
+  build() {
+    Row() {
+      Text('test')
+        .fontSize(20)
+    }
+    .width('100%')
+    .height(50)
+  }
+}
diff --git a/entry/src/main/ets/pages/basicPre.ets b/entry/src/main/ets/pages/basicPre.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f94f722ad6f7197a2b414db8882076e6ff05f5ed
--- /dev/null
+++ b/entry/src/main/ets/pages/basicPre.ets
@@ -0,0 +1,45 @@
+// [Start song_info1]
+import { Header } from './header'
+import { SongInfoItem } from './song';
+import DataSourcePrefetching from '../model/ArticleListData';
+import { ObservedArray } from '../utils/ObservedArray';
+import { ReusableArticleCardView } from '../components/ReusableArticleCardView';
+import Constants from '../constants/Constants';
+import { PageViewModel } from './song';
+import { BasicPrefetcher } from '@kit.ArkUI';
+@Entry
+@Component
+export struct LazyForEachListPage {
+  @State collectedIds: ObservedArray<string> = ['1', '2', '3', '4', '5', '6'];
+  @State likedIds: ObservedArray<string> = ['1', '2', '3', '4', '5', '6'];
+  @State isListReachEnd: boolean = false;
+  // Create a DataSourcePrefetching object, which is a data source with task prefetching and cancellation capabilities.
+  private readonly dataSource :ESObject= new DataSourcePrefetching(PageViewModel.getItems());
+  // Create a BasicPrefetcher object, which is realized by the default dynamic prefetching algorithm.
+  private readonly prefetcher = new BasicPrefetcher(this.dataSource);
+
+  build() {
+    Column() {
+      Header()
+      List({ space: Constants.SPACE_16 }) {
+        LazyForEach(this.dataSource, (item: SongInfoItem ) => {
+          ListItem() {
+            ReusableArticleCardView({ articleItem: item })
+          }
+          .reuseId('article')
+        })
+      }
+      .cachedCount(5)
+      .onScrollIndex((start: number, end: number) => {
+        // List scrolling triggers visibleareachan, updates the prefetch range in real time, and triggers calling prefetch and cancel interfaces.
+        this.prefetcher.visibleAreaChanged(start, end)
+      })
+      .width(Constants.FULL_SCREEN)
+      .height(Constants.FULL_SCREEN)
+      .padding({ left: 10, right: 10 })
+      .layoutWeight(1)
+    }
+    .backgroundColor($r('app.color.text_background'))
+  }
+}
+// [End song_info1]
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/prefetching.ets b/entry/src/main/ets/pages/prefetching.ets
new file mode 100644
index 0000000000000000000000000000000000000000..0fe1ee8751786d69ea85e11e896758c545bbe7d2
--- /dev/null
+++ b/entry/src/main/ets/pages/prefetching.ets
@@ -0,0 +1,76 @@
+// [Start song_info]
+import { SongInfoItem } from './song';
+import { HashMap } from '@kit.ArkTS';
+import { fileIo } from '@kit.CoreFileKit';
+import { IDataSourcePrefetching } from '@kit.ArkUI';
+import { rcp } from '@kit.RemoteCommunicationKit';
+let PREFETCH_ENABLED: boolean = false;
+const CANCEL_CODE: number = 1007900992;
+const IMADE_UNAVAILABLE = $r('app.media.startIcon');
+export default class DataSourcePrefetching implements IDataSourcePrefetching {
+  private dataArray: Array<SongInfoItem>;
+  private listeners: DataChangeListener[] = [];
+  private readonly requestsInFlight: HashMap<number, rcp.Request> = new HashMap();
+  private readonly session: rcp.Session = rcp.createSession();
+  private readonly cachePath = getContext().getApplicationContext().cacheDir;
+  cache(ID:number,body: ESObject){}
+  constructor(dataArray: Array<SongInfoItem>) {
+    this.dataArray = dataArray;
+  }
+  totalCount(): number {
+    throw new Error('Method not implemented.');
+  }
+  getData(index: number): ESObject {
+    throw new Error('Method not implemented.');
+  }
+  registerDataChangeListener(listener: DataChangeListener): void {
+    throw new Error('Method not implemented.');
+  }
+  unregisterDataChangeListener(listener: DataChangeListener): void {
+    throw new Error('Method not implemented.');
+  }
+  async prefetch(index: number): Promise<void> {
+    PREFETCH_ENABLED = true;
+    if (this.requestsInFlight.hasKey(index)) {
+      throw new Error('Already being prefetched')
+    }
+    const item = this.dataArray[index];
+    if (item.cachedImage) {
+      return;
+    }
+    // Data request
+    const request = new rcp.Request(item.albumUrl, 'GET');
+    // Cache the network request object, which is convenient for handling when the request needs to be cancelled.
+    this.requestsInFlight.set(index, request);
+    try {
+      // Send an http request to get a response.
+      const response = await this.session.fetch(request);
+      if (response.statusCode !== 200 || !response.body) {
+        throw new Error('Bad response');
+      }
+      // Storing the loaded data information into a cache file.
+      item.cachedImage = await this.cache(item.songId, response.body);
+      // Delete the specified element
+      this.requestsInFlight.remove(index);
+    } catch (err) {
+      if (err.code !== CANCEL_CODE) {
+        item.cachedImage = IMADE_UNAVAILABLE;
+        // Remove abnormal network request tasks.
+        this.requestsInFlight.remove(index);
+      }
+      throw err as Error;
+    }
+  }
+  cancel(index: number) {
+    if (this.requestsInFlight.hasKey(index)) {
+      // Returns the specified element of a MAP object.
+      const request = this.requestsInFlight.get(index);
+      // Cancel data request
+      this.session.cancel(request);
+      // Remove the canceled network request object
+      this.requestsInFlight.remove(index);
+    }
+  }
+  // ...
+}
+// [End song_info]
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/song.ets b/entry/src/main/ets/pages/song.ets
new file mode 100644
index 0000000000000000000000000000000000000000..0b751a1ddcdf801a9a528752676934a50ab51fbf
--- /dev/null
+++ b/entry/src/main/ets/pages/song.ets
@@ -0,0 +1,83 @@
+export interface SongInfoItem{
+  /**
+   *  Randomly generated unique ID
+   */
+  uuid: string;
+  /**
+   *  Resource id
+   */
+  id: string;
+  /**
+   *  Resource title
+   */
+  title: string
+  /**
+   *  Resource brief
+   */
+  brief?: string
+  /**
+   *  Resource type
+   */
+  type: string
+  /**
+   *  Resource detail Web URL
+   */
+  webUrl: string
+  /**
+   *  Resource publish date
+   */
+  publishDate: Date
+  /**
+   *  Resource cover image used on card
+   */
+  headerImageUrl: string
+  /**
+   *  Topics to which the resource belongs.
+   */
+  topics: string[]
+  /**
+   *  Resource views count
+   */
+  viewsCount: number
+  /**
+   *  Resource collection count
+   */
+  collectionCount: number
+  /**
+   *  Resource likes count
+   */
+  likesCount: number
+  /**
+   *  Resource tag
+   */
+  tag: string
+  /**
+   *  Indicates whether the resource is added to likes list of the current user.
+   */
+  isLiked: boolean
+  /**
+   *  Indicates whether the resource is added to favorites of the current user
+   */
+  isCollected: boolean
+  /**
+   *  Whether the resource has been browsed by the current user
+   */
+  isViewed: boolean
+  /**
+   *  Resource detail media URL
+   */
+  mediaSrc: string
+  /**
+   *  Resource banner image URL
+   */
+  bannerSrc: string
+  cachedImage:ESObject
+  songId:number
+  albumUrl:string
+}
+
+export class  PageViewModel{
+  static getItems(): import("../model/LearningResource").LearningResource[] {
+    throw new Error('Method not implemented.')
+  }
+}
diff --git a/entry/src/main/ets/pages/test.ets b/entry/src/main/ets/pages/test.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3e31861f09216ac7c360c1066d8da6569e1f552f
--- /dev/null
+++ b/entry/src/main/ets/pages/test.ets
@@ -0,0 +1,36 @@
+// [Start for_each1]
+interface IDataSource {
+  totalCount(): number;
+  getData(index: number): ESObject;
+  registerDataChangeListener(listener: DataChangeListener): void;
+  unregisterDataChangeListener(listener: DataChangeListener): void;
+}
+
+interface DataChangeListener {
+  onDataReloaded(): void;
+  onDataAdd(index: number): void;
+  onDataMove(from: number, to: number): void;
+  onDataDelete(index: number): void;
+  onDataChange(index: number): void;
+}
+// [End for_each1]
+@Entry
+@Component
+struct test {
+// [Start for_each]
+  ForEach(
+    arr: ESObject[],
+    itemGenerator: (item: ESObject, index?: number) => void,
+    keyGenerator?: (item: ESObject, index?: number) => string
+  ){}
+// [End for_each]
+
+// [Start for_each1]
+  LazyForEach(
+    dataSource: IDataSource,
+    itemGenerator: (item: ESObject) => void,
+    keyGenerator?: (item: ESObject) => string
+  ): void{}
+// [End for_each1]
+  build() {}
+}
\ No newline at end of file