Code Monkey home page Code Monkey logo

pageaccelerator's Introduction

pageAccelerator

Build Status Gitter CDNJS

A very light solution to load web pages faster.

Browser Support

  • Google Chrome 5.0+
  • Firefox 4.0+
  • Edge 14+
  • Opera 11.5+
  • Safari 5.0+

** For IE10+ you need to use some polyfill to add support for Promises.

How does it work?

It's an agnostic library that uses ajax and pushState to deliver a faster navigation experience. pageAccelerator is a very light version of turbolinks and pjax (our minfied file is just 2.2KB!). Basically what it does is follow every link in your application and each click it loads the page in background and replaces the content correctly, keeping the real datas from body and head, updating the title.

Installation

To install pageAccelerator, execute:

  npm install page-accelerator --save

or

  bower install page-accelerator --save

Or simply use the minified file from the dist/ directory.

How to use?

pageAccelerator doesn't depend on jQuery, Zepto or any other library to work. You need just to include it at the end of your HTML code:

  <script src="page-accelerator.min.js"></script>

Then you need to call the pageAccelerator function, such as the example bellow:

  pageAccelerator();

Just call it and pageAccelerator was already following the web application links.

For links that you don't want to be followed, you need simply add data-pageAccelerator="false".

Parameters

pageAccelerator can also receive an object as a parameter with the following options:

  • beforeLoading function: Will be called whenever a new page was requested by a click or the browser back
  • afterLoading function: Will be called whenever a new page has been loaded

Team

pageAccelerator was made with love by a bunch of awesome contributors.

Author

@evandrolg
@evandrolg

pageaccelerator's People

Contributors

amilajack avatar calinou avatar danielmatthew avatar evandrolg avatar michaelmior avatar rodrigohahn avatar sufuf3 avatar xwartz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pageaccelerator's Issues

Getting error: NS_ERROR_ILLEGAL_VALUE:

NS_ERROR_ILLEGAL_VALUE:
...{var e=t.state;this._updateBodyAttributes(e.attrs);a.body.innerHTML=e.content;va...

i have included on end of the HTML
`<script src="/js/page-accelerator.min.js</script>

<script>pageAccelerator();</script>`

About blacklisting

In general terms this library looks like instantclick but more lightweight, so that's good!

I thin that blacklisting links can be improved:

  • data-no-pageAccelerator instead of data-pageAccelerator="false". Or something similar. Less characters, more semantic.
  • Add ability to blacklisting a group of elements. For example, in instantclick:

To blacklist all links in a parent element, add data-no-instant to that element.

Make compatible with browserify

It seems that pageAccelerator cannot be used with browserify.

The following code fails:

// client.js
var pageAccelerator = require('page-accelerator')

pageAccelerator(function(err, res) {
    console.log('page loaded', err, res)
})

error message:

    TypeError: pageAccelerator is not a function

Would you consider to add compatibility with browserify? This would ease build processes, by not having to explicitely copy the dist/page-accelerator.min.js to a suitable location.

IE11 not working / Promise

On IE11 it does not work, simply because there is no window.Promise.
I wonder why you list it as working on IE 10 because there is no window.Promise either

mess with pages with # in url

I use custombox.js modal in my page and it uses ID and href=#id to show modal on page, seems it has conflict between these addressing in URL, cause it stop page to show content correctly

CommonJS module loader does not work

The global object in a browser window is window, which can also be referenced using this, like I said in my previous comment in #6 when writing a tip about how to implement this library as a universal module. However, in the module factory block, the global object is referenced by window, which, when loaded as a CommonJS module is undefined. This causes an error, and prevents the user from using this library.

Attaching screenshot:
image

FYI @EvandroLG

Improper interception of user choice to open in new window or tab

The accelerator is avoiding user to open links into another window or tab.

This can be replicated simply by clicking into a link holding CONTROL (M$ Windows or Linux) or COMMAND (Mac).

The expected behaviour is that link must be opened into a new window or tab. The accelerator must not intercept the link if the proper keys are holded.

Demo

Hi, a demo would have been great to show lib capabilities :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.