Carga dinámica de contenido mediante fetch API-Pill. js

Vista prévia

Descripción

Pill. js es una biblioteca de JavaScript ultraligera para hacer que el comportamiento de la página web sea como la aplicación nativa mediante la carga dinámica de contenido en la página web actual mediante fetch API.

Con Pill. js, puede mostrar un indicador de carga superior en la parte superior hasta que los recursos de contenido solicitados se hayan cargado en el documento.

Funcionamiento

Instalación:

Instale & descargar.

# NPM
$ npm install pill --save

Cargue el Pill. js en el documento.

<script src="https://unpkg.com/[email protected]/dist/pill.min.js"></script>

Cree un indicador de carga adhesiva en la parte superior de la Página Web.

<div id="indicator">Loading...</div>

#indicator {

position: fixed;

top: 0;

right: 0;

display: none;
}

const loadingIndicator = document.querySelector('#indicator')

Inicializar la biblioteca de píldoras en el contenido Web.

<div id="content">

<!-- content here -->
</div>

pill('#content')

Active el indicador de carga.

pill('#content', {

onLoading() {


loadingIndicator.style.display = 'initial'

},

onReady() {


loadingIndicator.style.display = 'none'

}
})

Más opciones de configuración.

pill('#content', {


/* error handler


 function defaultErrorHandler() {



return {




title: 'Error',




content: `<h1>Error</h1><p>Ooops. Something went wrong</p>`,




code: 500,




timestamp: new Date(),



}


}

*/

fromError: defaultErrorHandler,


/* determines whether the URL could be served by Pill


 function shouldServeDefault(href) {



 return href.origin === location.origin


 }

*/

shouldServe: shouldServeDefault,


// determines whether previuosly loaded page should be loaded from server

shouldReload() {}


})