萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 通過pjax實現無刷新翻頁

通過pjax實現無刷新翻頁

 這篇文章主要介紹了通過pjax實現無刷新翻頁,兼容新版jquery,使用心得方法,需要的朋友可以參考下

pushState是一個可以操作history的api,該api的介紹和使用請見這裡:http://www.welefen.com/use-ajax-and-pushstate.html   目前已經有http://github.com/, http://plus.google.com, http://www.welefen.com 等網站已經使用。   pjax是對ajax + pushState的封裝,讓你可以很方便的使用pushState技術。   同時支持了緩存和本地存儲,下次訪問的時候直接讀取本地數據,無需在次訪問。   並且展現方式支持動畫技術,可以使用系統自帶的動畫方式,也可以自定義動畫展現方式。   關於pjax這裡就不多介紹了,簡單易用,輕松地實現部分刷新,告別鏈接帶來的閃爍。 之前看過pjax並實現了demo,還寫了篇筆記,不過jquery 1.9把live()方法刪掉了,新版pjax也隨之換了用on()方法實現,最近項目有用到,所以了解了新的使用方法,這裡也做一個新的筆記。   環境: jquery 1.10.2 下載 jquery.pjax.js 下載   使用方法: 監控所有class為pjaxlink的鏈接,采用pjax更新鏈接頁面中id為ToInsert的容器內容到本頁面中id為Content的容器中。若獲取內容時間超過5秒,則直接跳轉:     復制代碼 代碼如下: $(document).pjax('a.pjaxlink', '#Content', {fragment:'#ToInsert', timeout:5000});     使用實例: 原始頁面是通過跳轉的翻頁,我在不改變頁面內容的前提下,使用pjax監控翻頁鏈接,僅更新列表(保證列表容器是分頁容器的父節點)的內容。    代碼如下: if ($.support.pjax) {     //遍歷所有分頁容器     $('.pagercontainer').each(function(){         //取得列表容器         $listcontainer=$(this).parent();         //取得列表容器的ID         var listcontainerid=$listcontainer.attr('id');         //用pjax監控所有分頁鏈接並定義pjax來實現更新         $(document).pjax('#'+listcontainerid+' .pagercontainer a', '#'+listcontainerid, {fragment:'#'+listcontainerid, timeout:5000});     });     $(document).on('pjax:send', function() {         //在pjax發送請求時,顯示loading動畫層         $('#loading').show();     });     $(document).on('pjax:complete', function() {         //在pjax處理完成後,隱藏loading動畫層         //由於速度太快會導到loading層閃爍,影響體驗,所以在此加上500毫秒延遲         setTimeout(function(){$('#loading').hide()},500);     }); }  
copyright © 萬盛學電腦網 all rights reserved