Merge pull request #5 from WittBulter/improve-page-loader

feat(pages): improve page loader

Author: WittBulter

README.md

@@ -9,6 +9,8 @@
 
 >use **back-loader** in your project, you can quickly preload more pictures, styles(.css) or scripts, it will make your website more fluent.
 
+According to my data，use `back-loader` preload all page in production project, DomReadyTime < 200 ms !!!
+the user experience of each page can be greatly improved.
 <br>
 
 #### Usage
@@ -39,15 +41,14 @@ type loadEvent = {
   insertScripts?: Function,
 }
 ```
-<br>
-
-#### More
 
-1. the resources of different domain names can be loaded normally.
-2. if you use `page`, `back-loader` automatically analyzes every resources included in the page. but domain name needs to be the same as the current page. (of course)
+For example, i want preload `google.com/new-product.html` page,  then append the above code on the home page (or any other pages),
+like `setTimeout(() => backHandler.start(), 1000)`, browser will load all resources and caching to memory or disk,
+waiting for the user to browse `google.com/new-product.html`，just need few millisecond!
 
 <br>
 
+
 #### LICENSE
 
 **MIT**

examples/main.ts

@@ -4,8 +4,8 @@ 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'],
-     images: ['https://www.bing.com/az/hprichbg/rb/TadamiTrain_ROW14602114613_1920x1080.jpg'],
+     pages: ['https://www.baidu.com'],
+     // images: ['https://www.bing.com/az/hprichbg/rb/TadamiTrain_ROW14602114613_1920x1080.jpg'],
    })
   backLoader.start().on(event => {
     console.log(event)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "back-loader",
-  "version": "0.1.3",
+  "version": "1.0.0",
   "description": "a easy and steady preload lib",
   "main": "release/index",
   "unpkg": "release/index.js",

package.json

@@ -1,6 +1,6 @@
 import { EventHub } from './event'
 import { LoaderEvent } from '../types'
-import { $fetch, filterResources, listenImageLoad } from '../utils/tools'
+import { $fetch, hiddenIframe, listenImageLoad } from '../utils/tools'
 
 
 export class Loader {
@@ -22,16 +22,9 @@ export class Loader {
 
   pages(urls: string[]): void {
     urls.forEach(url => {
-      $fetch(url, { mode: 'no-cors' })
-      .then(html => {
-        this.scripts(filterResources(html, 'script'))
-        this.styles(filterResources(html, 'style'))
-      })
-      .catch((e) => {
-        this.emit(Object.assign({}, this.baseEvent, {
-          type: 'page', source: url, success: false,
-        }))
-      })
+      const iframe: HTMLIFrameElement = document.createElement('iframe')
+      iframe.src = url
+      document.body.appendChild(hiddenIframe(iframe))
     })
   }
 

src/core/loader.ts

@@ -33,16 +33,15 @@ export const filterResources = (source: string, type: string): string[] => {
 export const listenImageLoad = (images: HTMLImageElement[], done: (url: string) => void)
 : void => {
   images.forEach(img => img.onload = () => done(img.src))
-  // const isCompleted = (imgs: HTMLImageElement[]) => !imgs.length
-  // const timer: number = window.setInterval(() => {
-  //
-  //   // images = images.map(img => {
-  //   //   console.log(img)
-  //   //   if (!img.complete) return img
-  //   //   done(img.src)
-  //   //   return null
-  //   // })
-  //   // .filter(v => !!v)
-  //   isCompleted(images) && clearInterval(timer)
-  // }, 300)
+}
+
+export const hiddenIframe = (iframe: HTMLIFrameElement): HTMLIFrameElement => {
+  iframe.style.opacity = '0'
+  iframe.style.position = 'fixed'
+  iframe.style.top = '-20000px'
+  iframe.style.left = '-20000px'
+  iframe.style.zIndex = '-100'
+  iframe.style.width = '1px'
+  iframe.style.height = '1px'
+  return iframe
 }