Page turning without refreshing through pjax (compatible with new version of jquery)

Page turning without refreshing through pjax (compatible with new version of jquery)_jquery

WBOY

Release： 2016-05-16 17:01:49

Original

1368 people have browsed it

pushState is an API that can operate history. For the introduction and use of the API, please see here: http://www.welefen.com/use-ajax-and-pushstate.html

Currently, http://github.com/, http://plus.google.com, http://www.welefen.com and other websites have been used.

pjax is an encapsulation of ajax pushState, allowing you to use pushState technology very conveniently.

Supports both caching and local storage. The local data can be read directly the next time you visit, without the need for another visit.

And the display method supports animation technology. You can use the system’s own animation method or customize the animation display method.

I won’t introduce much about pjax here. It is simple and easy to use, and you can easily achieve partial refresh and say goodbye to the flickering caused by links.
I have seen pjax before and implemented the demo, and also wrote a note. However, jquery 1.9 deleted the live() method, and the new version of pjax also changed to use the on() method. It has been used in recent projects, so After understanding the new usage method, I also make a new note here.

Environment:
jquery 1.10.2 Download
jquery.pjax.js Download

Usage:
Monitor all links with class pjaxlink, and use pjax to update the container content with id ToInsert in the link page to the container with id content in this page. If it takes more than 5 seconds to obtain the content, it will jump directly to:

Copy code The code is as follows:

$(document).pjax('a.pjaxlink' , '#Content', {fragment:'#ToInsert', timeout:5000});

Usage example:
The original page is turned through a jump. I use pjax to monitor the page turning link without changing the page content, and only update the list (make sure the list container is the parent node of the paging container) content.

Copy code The code is as follows:

if ($.support.pjax) {
 //Traverse all paging containers 
 $('.pagercontainer').each(function(){
 //Get the list container 
 $listcontainer=$(this).parent();
 / /Get the ID of the list container
 var listcontainerid=$listcontainer.attr('id');
 //Use pjax to monitor all paging links and define pjax to update 
 $(document).pjax(' #' listcontainerid ' .pagercontainer a', '#' listcontainerid, {fragment:'#' listcontainerid, timeout:5000});
 });
 $(document).on('pjax:send', function() {
             // When pjax sends a request, display the loading animation layer                                                                  'pjax:complete', function() {
 //After the pjax processing is completed, hide the loading animation layer
 //Because the speed is too fast, the loading layer will flicker and affect the experience, so add 500 here Millisecond delay
 setTimeout(function(){$('#loading').hide()},500);
 });
}