Testing PJAX page loads with Barba.js

This is the index.html file

All links found on this page lead to other html files. With PJAX in use they're preloaded when you hover over the links so that the page is ready to be injected into the specified area when clicked. A transition effect is also applied. This makes page loads appear seamless and there's no flicker or flash like on a typical page load.

Because only things within the specified area are loaded the technique minimizes browser HTTP requests. CSS and JS doesn't need to be downloaded again for the page.

Notice how the javascript also rewrites the URL in the browser's URL bar and in the browser's history. This ensures that the back button will work as expected and allows for permalinking.

The navbar is NOT within the specified area for injection so it stays constant across all pages and doesn't transition to a duplicate navbar. The current link in the navbar recieves it's styling with css thanks to a bit of javascript.

This technique can and has been applied to Wordpress as well! Here's an example theme that uses PJAX.

Lorem ipsum quod voluptatem veniam, optio at praesentium, saepe incidunt quia? Culpa optio perspiciatis, odit quibusdam voluptatem esse ipsam doloremque rerum hic quas, ducimus, ab nobis quia ad unde vitae error accusamus?

Impedit odit deserunt quos, vero delectus. Enim asperiores voluptatum, modi beatae! Beatae provident, minima quo dolore officiis fugiat corrupti excepturi nobis suscipit ullam nesciunt, voluptatem aliquid iure repellat atque repellendus!

Optio voluptate, provident tenetur aut molestias quod itaque id facilis illum dignissimos, sequi quaerat! Vel cumque, labore iste quam velit veniam reiciendis id, alias, maxime illum necessitatibus dolore aliquid rem.

Dolores illum similique recusandae, facilis eligendi tempore illo, necessitatibus eius ipsa magnam quae, excepturi veniam laboriosam reiciendis culpa est amet, quis? Expedita sequi, exercitationem possimus molestiae at sunt quisquam commodi.

Corporis fuga, perspiciatis iste aspernatur debitis possimus odit sint aut, ratione officia sed id pariatur voluptatem dolores atque asperiores doloribus praesentium labore laudantium veritatis. Totam, recusandae mollitia dignissimos cupiditate! Voluptas!