jQuery Plugin for Faster Page Load Time - Pronto

jQuery Plugin for Faster Page Load Time - Pronto
File Size: 21 KB
Views Total: 3720
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Pronto is a jQuery plugin that reduces the over all server load and font-end render time of your page by using a "partial page load" technique. The plugin only loads a piece of the page at a time instead of the entire document.

How to use it:

1. Add jQuery library and jquery.bp.pronto.min.js to your current web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.bp.pronto.min.js"></script>

2. The html

<div id="pronto">
<h2>Page Title</h2>
<p>YOUR CONTENT.</p>
</div>

3. The javascript

$(document).ready(function() {
// Init pronto
$.pronto();

// Bind pronto events
$(window).on("pronto.render", initPage)
 .on("pronto.load", destroyPage);

// Remember to init first page
initPage();
});

function initPage() {
// bind events and initialize plugins
}

function destroyPage() {
// unbind events and remove plugins
}

4. Options.

var options = {
// Cache AJAX responses
cache: true,

// Forces new requests when navigating back/forward
force: false,

// Jump page to top on render
jump: true,

// Flag for content loaded into modal
modal: false,

// Selecter to target in the DOM
selector: "a",

// Custom render function
render: $.noop,

// GET variable for requests
requestKey: "pronto",

// Key / value pair for rendering responses (key is response key, value is target selector)
target: {
  title: "title",
  content: "#pronto"
},

tracking: {
  legacy: false, // Use legacy ga code
  manager: false, // Use tag manager events
  variable: 'currentURL', // data layer variable name - macro in tag manager
  event: 'PageView' // event name - rule in tag manager
},

// Transition timing callback; should return user defined $.Deferred object, which must eventually resolve
transitionOut: $.noop
};

Change Log:

v3.2.1 (2014-10-06)

  • Adding transitionOut option to define custom timing transition
  • Demo update

v3.1.4 (2014-10-04)

  • Fixing issue with natural navigation and modal option

v3.1.3 (2014-09-23)

  • Fixing issue with scrolltop on navigation

v3.1.1 (2014-09-23)

  • Adding parameter to request event for pop state;

v3.1.0 (2014-09-21)

  • Switching to LESS; Minified css; New build process; Updating demo; Fixing issue with hash links

v3.0.18 (2014-08-20)

  • Adding 'modal' option for laoding content into modal overlay

v3.0.17 (2014-08-08)

  • Fixing requestDelay on popState

v3.0.15 (2014-08-05)

  • Adding enable and siable methods

v3.0.14 (2014-03-13)

  • Adding 'jump' option; Fixing docs;

v3.0.13 (2014-03-13)

  • Adding progress event based on XMLHttpRequest2 api;

v3.0.10 (2014-03-13)

  • Fixing bug with loading errors (404, etc);

v3.0.9 (2014-02-07)

  • Fixing issue with event propagation.

v3.0.8 (2014-01-23)

  • Fixing issue with event propagation.

v3.0.3 (2014-01-13)

  • Fixing even namespace - example: load.pronto is now to pronto.load (caused weird issues with window loading *facepalm*);

v3.0.2 (2014-01-07)

  • Fixing bug with _gaq and pushing page views

v3.0.1 (2014-01-05)

  • Fixing render bug.

v0.8.3 (2013-12-04)

  • code cleaning.

v0.8.2 (2013-10-27)

  • Adding forceRequests option, disables caches states and forces reload on back/forward navigation, useful in web apps where data changes states often.

v0.7.3 (2013-10-25)

  • Adding check for support to public "open" method, falls back to standard window.location.href change.

v0.7.2 (2013-10-08)

  • bug fixed

v0.7.1 (2013-10-01)

  • Fixed console nonsense.

v0.6.3 (2013-04-21)

  • Fixing issue with navigating away from current page - links now update state and prevent default if requesting the current url.

v0.6.2 (2013-03-29)

  • Remove GUID, too many bugs, back to standard pop state handling

 


This awesome jQuery plugin is developed by benplum. For more Advanced Usages, please check the demo page or visit the official website.