feat(loader): add image loader

Author: WittBulter

examples/main.ts

@@ -4,11 +4,12 @@ document.title = 'hello'
 const handler = async() => {
    const backLoader = new BackLoader({
      // scripts: ['https://code.jquery.com/jquery-3.2.1.slim.min.js'],
-     pages: ['https://google.com'],
+     // pages: ['https://google.com'],
+     images: ['https://cn.bing.com/az/hprichbg/rb/BarHarborCave_ZH-CN8055769470_1920x1080.jpg'],
    })
-    backLoader.start().on(event => {
-      console.log(event)
-    })
+  backLoader.start().on(event => {
+    console.log(event)
+  })
 }
 
 ;(() => window.onload = () => handler().then())()

src/core/loader.ts

@@ -1,6 +1,6 @@
 import { EventHub } from './event'
 import { LoaderEvent } from '../types'
-import { $fetch, filterResources } from '../utils/tools'
+import { $fetch, filterResources, listenImageLoad } from '../utils/tools'
 
 
 export class Loader {
@@ -27,12 +27,24 @@ export class Loader {
         this.scripts(filterResources(html, 'script'))
         this.styles(filterResources(html, 'style'))
       })
-      .catch((e) => {
-        console.log(e)
+      .catch(() => {
+        this.emit(Object.assign({}, this.baseEvent, {
+          type: 'page', source: url, success: false,
+        }))
       })
     })
   }
 
+  images(urls: string[]): void {
+    const imageElements: HTMLImageElement[] = urls
+    .map(url => Object.assign(new Image(), { src: url }))
+    listenImageLoad(imageElements, (url: string) => {
+      this.emit(Object.assign({}, this.baseEvent, {
+        type: 'image', source: url,
+      }))
+    })
+  }
+  
   private loadURL(urls: string[], type: string): void {
     urls.forEach(url => {
       const scriptEvent = Object.assign({}, this.baseEvent, {

src/index.ts

@@ -15,11 +15,12 @@ export class BackLoader {
   start(): BackLoader {
     this.hub = new EventHub()
     const loader = new Loader(this.hub)
-    const { scripts, styles, pages } = this.options
+    const { scripts, styles, pages, images } = this.options
 
     scripts && loader.scripts(scripts)
     styles && loader.styles(styles)
     pages && loader.pages(pages)
+    images && loader.images(images)
     return this
   }
 

src/types.ts

@@ -1,8 +1,9 @@
 
 export type LoaderOptions = {
-  pages?: string[]
-  scripts?: string[]
-  styles?: string[]
+  pages?: string[],
+  scripts?: string[],
+  styles?: string[],
+  images?: string[],
 }
 
 export type LoaderEvent = {

src/utils/check.ts

@@ -5,6 +5,7 @@ const regs = {
   page: /^http|^\/\//,
   js: /(^http|^\/\/)\S+\.js$/,
   css: /(^http|^\/\/)\S+\.css$/,
+  img: /^http|^\/\//,
 }
 
 export const pages = (pages: string[]): boolean => {
@@ -28,11 +29,19 @@ export const styles = (styles: string[]): boolean => {
   return true
 }
 
+export const images = (images: string[]): boolean => {
+  if (!Array.isArray(images)) return Log.options.imagesError()
+  const unnormalLinks = images.filter(s => !regs.img.test(s))
+  if (unnormalLinks && unnormalLinks.length) return Log.options.imagesError()
+  return true
+}
+
 export const options = (ops: LoaderOptions): boolean => {
   const checkResults: boolean[] = []
   ops.pages && checkResults.push(pages(ops.pages))
   ops.scripts && checkResults.push(scripts(ops.scripts))
   ops.styles && checkResults.push(styles(ops.styles))
+  ops.images && checkResults.push(images(ops.images))
 
   if (!checkResults.length) return Log.options.isEmpty()
   return !`${checkResults}`.includes('false')

src/utils/log.ts

@@ -8,5 +8,6 @@ export const options = {
   pagesError: () => warning('options [pages] error.'),
   scriptsError: () => warning('options [scripts] error.'),
   stylesError: () => warning('options [styles] error.'),
+  imagesError: () => warning('options [images] error.'),
   isEmpty: () => warning('options is empty!'),
 }

src/utils/tools.ts

@@ -1,22 +1,24 @@
-
+// resource load use no-cors mode default
+// html load must use cors
 export const $fetch = (url: string, init: RequestInit = {}) => {
   return fetch(url, Object.assign({ mode: 'no-cors' }, init))
-  .then(r => {
-    console.log(r)
-    return r.text()
-  })
+  .then(r => r.text())
 }
 
+// like './images/xxx' or '../images'
 export const isRelativeURL = (path: string) => {
   return path.startsWith('./') || path.startsWith('..')
 }
 
+
 export const makeResourceReg = (str: string): RegExp => {
   return {
     script: /\<script\s+\S?src\=\"([^"]*)\"/g,
     style: /\<link\s+\S?\s?href\=\"([^"]*.css)\"/,
   }[str]
 }
+
+// find scripts and styles in html string
 export const filterResources = (source: string, type: string): string[] => {
   const reg: RegExp = makeResourceReg(type), arr: string[] = []
   let result: string[], num = 10
@@ -27,3 +29,17 @@ export const filterResources = (source: string, type: string): string[] => {
   }
   return arr
 }
+
+export const listenImageLoad = (images: HTMLImageElement[], done: (url: string) => void)
+: void => {
+  const isCompleted = (imgs: HTMLImageElement[]) => !imgs.length
+  const timer: number = window.setInterval(() => {
+    images = images.map(img => {
+      if (!img.complete) return img
+      done(img.src)
+      return null
+    })
+    .filter(v => !!v)
+    isCompleted(images) && clearInterval(timer)
+  }, 300)
+}