page loader 다운로드 - page loader 소스 코드 다운로드

page loader

기타 카테고리

1.0.0

다운로드

@oom/페이지-로더

ajax를 사용하여 페이지를 로드하고 현재 페이지의 콘텐츠를 바꾸는 Javascript 라이브러리입니다. 제목, URL, CSS 및 자바스크립트가 변경됩니다. 이 라이브러리를 사용하여 페이지 로드 속도를 향상하고 아름다운 페이지 전환을 만들 수 있습니다. 다음과 같은 기능이 있습니다.

종속성 없음
슈퍼라이트
일반 링크 및 양식과 함께 사용할 수 있습니다.
점진적인 향상 전략을 따릅니다. 자바스크립트가 실패하더라도 웹페이지는 계속 작동합니다.
ES6으로 구축되었으므로 이전 브라우저 지원을 위해 트랜스파일러가 필요할 수 있습니다.

비슷한 목적을 가진 다른 라이브러리로는 barba.js, Turbolinks 또는 Highway가 있습니다. 페이지 로더의 주요 목표는 더 가볍고 사용자 정의가 가능하도록 더 가볍고 덜 마술적인 것입니다.

설치하다

요구사항:

패키지 및 종속성을 설치하기 위한 NPM 또는 Yarn
http 요청에 Fetch API를 사용하므로 가져오기 폴리필과 Promise 폴리필을 사용하여 이전 브라우저를 지원할 수 있습니다.

npm install @oom/page-loader

용법

HTML

다음 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 >

자바스크립트

완전한 경험을 위해 자바스크립트를 사용하세요:

 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" ) ;
} ) ;