網站前端ajax翻頁插件記錄

背景：寫了個Django項目，但是在部署到服務器第一次打開網站前端首頁的時候，加載速度超慢，主要集中在圖片加載浪費時間，而此時我的前端很多部分還沒有填充圖片，

　　 所以想寫個ajax，做到異步處理，讓首頁內容根據用戶滾動條上下滑動加載部分信息。

Google了下看有沒有輪子，首先看到的是infinite-ajax-scroll前端插件，之後找到了infinite-scroll這個插件，兩種插件試了下，效果都差不多，這裏簡單記錄下：

兩者都是基於jQuery，實現翻頁信息加載。

我的網頁上的結構：

1 <div class="entry-content"
 
>
2     <div class="goods_type"></div>
3     <div class="page_pagination">
4         <a href="" class="next"></a>
5     </div>
6 </div>

目的：在div.entry-content中根據a.next裏面的href，按順序加載div.goods_type

一、infinite-ajax-scroll：

　　GitHub地址：https://github.com/webcreate/infinite-ajax-scroll

　　使用前，需要先引入：

<script type="text/javascript" src="./js/jquery/jquery.min.js"></script>

<script type="text/javascript" src="./js/jquery-ias.min.js"></script>

直接上我的例子：

　　 container：表示你想要無限ajax加載標簽的上一級父標簽

　　item：表示你想要ajax加載的標簽

　　pagination：表示下一頁的標簽在什麽位置

　　next：具體指向鏈接a

　　前端在script中這樣處理，後臺需要將首頁的相關信息，分頁處理，每次ajax請求便返回一頁的信息內容

　　但是這個插件有一點問題，每次加載會有明顯的卡頓現象，時間不長，但是明顯會感覺不流暢，所以就有了下面的插件

二、infinite-scroll：

　　GitHub地址：https://github.com/metafizzy/infinite-scroll

　　使用前，先引入：

<script type="text/javascript" src="./js/jquery/jquery.min.js"></script>

<script type="text/javascript" src="./js/infinite-scroll.pkgd.min.js"></script>

　　還是按照上面的HTML結構來處理：

　　圖片中的代碼算是最簡單的使用方法了，還有其他設置參數，可以在GitHub上進行查看

　　這次處理完，試著滑動，很流暢。

不足：這兩個輪子，用起來好用，但是有點不足，我的前端模板套用了開源模板，其中使用了slick.js和slick.css這兩個插件進行圖片排序處理，

　　 使用過程中發現，slick對圖片所在標簽進行了動態添加class以及其他參數處理，對於ajax加載的後續相關模塊標簽，沒有進行影響，

　　　奈何JavaScript學的不精，不清楚怎麽處理這個。

網站前端ajax翻頁插件記錄