page loader下載 - page loader原始碼下載

page loader

其他類別

1.0.0

下載

@oom/頁面載入器

Javascript 函式庫使用 ajax 載入頁面並取代目前頁面中的內容。它改變了標題、url、css 和 javascript。您可以使用此庫來提高頁面載入速度並建立漂亮的頁面過渡。它具有以下特點：

無依賴關係
超輕
它可以與常規連結和表單一起使用
遵循漸進增強策略：如果 javascript 失敗，網頁繼續工作
使用 ES6 構建，因此您可能需要一個轉譯器來支援舊瀏覽器

其他具有類似用途的庫有 barba.js、turbolinks 或高速公路。頁面載入器的主要目標是變得更輕、更少神奇，以便更加靈活和可自訂。

安裝

要求：

NPM 或 Yarn 安裝套件和依賴項
它使用 Fetch API 來處理 http 請求，因此您可以使用 fetch polyfill 和 Promise polyfill 來支援舊瀏覽器

npm install @oom/page-loader

用法

超文本標記語言

讓我們從以下 html 程式碼開始：

 <!DOCTYPE html >
< html >
< head >
    < meta charset =" utf-8 " >
    < title > Page title </ title >
    < link rel =" stylesheet " href =" styles.css " >
    < script src =" scripts.js " > </ script >
</ head >
< body >
    < nav class =" menu " >
        < a href =" section1.html " > Section 1 </ a >
        < a href =" section2.html " > Section 2 </ a >
        < a href =" section3.html " > Section 3 </ a >
    </ nav >
    < main class =" content " >
        < h1 > This is the first section </ h1 >

        < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </ p >
    </ main >
</ body >
</ html >

JavaScript

使用 javascript 獲得完整的體驗：

 import Navigator from "./vendors/@oom/page-loader/src/navigator.js" ;

const nav = new Navigator ( async ( load , event ) => {
  //Load the page
  const page = await load ( ) ;

  await page . replaceStyles ( ) ; //Load the new css styles defined in <head> not present currently
  await page . replaceScripts ( ) ; //Load the new js files defined in <head> not present currently
  await page . replaceContent ( "main" ) ; //Replace the <main> element
  await page . updateState ( ) ; //Update the page status (change url, title etc)
  await page . resetScroll ( ) ; //Reset the scroll position
} ) ;

//Init the navigation, capturing all clicks in links and form submits
nav . init ( ) ;

//Optionally, you can filter links and forms to disable this behaviour
nav . addFilter ( ( el ) => ! el . classList . contains ( "no-loader" ) ) ;

//For example, to disable forms:
nav . addFilter ( ( el ) => el . tagName !== "FORM" ) ;

//Subscribe to events
nav . on ( "error" , ( err ) => console . error ( err ) ) ;

//You can go manually to other url when you want
nav . go ( "https//example.com/page2.html" ) ;

//Or submit a form via ajax
const form = document . getElementById ( "my-form" ) ;
nav . submit ( form ) ;

//And handle downloads (links with download attribute)
nav . download ( async ( download , event , link ) => {
  link . classList . add ( "downloading" ) ;
  await download ( ) ;
  link . classList . remove ( "downloading" ) ;
} ) ;

頁

頁面實例包含已載入頁面的資訊。它具有以下方法和屬性：

 const nav = new Navigator ( async ( load , event , target , submitter ) => {
  //By clicking a link, the target is the A element
  //By submitting a form, the target is the form but you can get the submitter element (the button being pressed)
  const trigger = submitter || target ;

  trigger . classList . add ( "loading" ) ;

  const page = await load ( ) ;

  //Replace an element in the document with the same element in the page
  await page . replaceContent ( "#content" ) ;

  //Append the children of the loaded page to the same element in the document
  await page . appendContent ( "#content" ) ;

  //Remove content from the document
  await page . removeContent ( "#content > .unwanted" ) ;

  //Change the css styles used in the new page (<link rel="stylesheet"> in <head>).
  await page . replaceStyles ( ) ;

  //Change the js styles used in the new page (<script src="..."> in <head>).
  await page . replaceScripts ( ) ;

  //Performs a document.querySelector in the page. Throws an exception on empty result
  await page . querySelector ( "p" ) ;

  //Performs a document.querySelectorAll in the page. Throws an exception on empty result
  await page . querySelectorAll ( "p" ) ;

  //Runs a history.pushState changing the url and title.
  await page . updateState ( ) ;

  //Reset the page scroll to top (or to the #target element)
  await page . resetScroll ( ) ;

  page . dom ; //HTMLDocument with the content of the page
  page . url ; //The url of the loaded page
  page . status ; //The http status code of the ajax response

  trigger . classList . remove ( "loading" ) ;
} ) ;