// 1. audio can only be played on user interact in many OS. // 2. on iOS audio will only preload after playing (and of course after user interact) // So we may mute the audio element and play it to make it preload(Based on Solution1) // 3. in some situation, image even need to be append to DOM to make it actually load. // We have generatly 2 solution // 1. use XHR to ensure everything goes right (easier to implement, but potential memory issue) // 2. use Element to load everything (hard way, but likely to use less resource) // For who ever implement this, try your best export class ResourceLoader { constructor(option: { baseUrl?: string }) { // 1. remember all session created // 2. feed them } public baseUrl: string createSession(): ResourceLoaderSession { throw new Error("Not implemented") } get(name: string): T { throw new Error("Not implemented") } } // Manage the loading procedure(Spawning load workers, deciding implementation, etc...) export interface ResourceLoaderSession { readonly loader: ResourceLoader events: Leaf.EventEmitter<{ start progress: { perc: string // like "36.5%" down: number total: number } finish error: Error }> // Now every thing can load userIsInteracting() load(callback: (err?: Error) => void) add(name: string, uri: string, type: "image" | "video" | "audio"): this } export class XHRResourceLoaderSession implements ResourceLoaderSession { } export class ElementResourceLoaderSession implements ResourceLoaderSession { } // usage // const rl = new ResourceLoader() // let session = rl.createSession({baseUrl:Meta.cdnBase + "/resource/"}) // session.add("myImage","test.jpg") // default to image // .add("myVideo","test.mp4","video") // .add(...) // .load((err)=>{}) // session.events.listenBy(sb, progress,()=>{ // //updateUI //}) // // // after loaded // this.VM.src = rl.get("myImage")