Page scroll to bottom automatic Ajax get article

Page scroll to bottom automatic Ajax get article

The code is as follows

Copy Code

var _timer = {}; function delay_till_last (ID, FN, wait) { if (_timer[id]) { Window.cleartimeout (_timer[id]); Delete _timer[id]; } return _timer[id] = window.settimeout (function () { FN (); Delete _timer[id]; }, wait); } $ (document). Ready (function () { var ajax_url = null; $ (window). Scroll (function () { Delay_till_last (' Scroll_ajax ', function () { if (window). scrolltop () >= $ (document). Height ()-$ (window). Height ()-80) {///If you do not have a bottom fixed bar you can reduce the 80 appropriately Ajax_url = $ (". NextPage a"). attr ("href");//A hidden a tag stores the next page to pull the link if (Ajax_url) { $.ajax ({ Type: "GET", Url:ajax_url, Success:function (data) { $ (". NextPage"). Remove (); $ (". Postlist"). Append (data); }, Error:function (data) { $ (". Postlist"). After (' <div id= "ajax-list-error" > article get failed </div> '); } }); }else{ Ajax_load_hide (); $ ("#ajax-list-error"). Remove (); $ (". Postlist"). After (' <div id= "Ajax-list-error" > all articles have been loaded, no more articles ~</div> '); } } }, 100); }); });

The first delay_till_last function is used to prevent the event from repeating the triggering, that is, the repeated content loads many times.

Postlist for the article Li's ul, there are two places to pay attention to change.

Transform the main loop, now put a function in the function.php

The code is as follows	Copy Code
Ajax Get List function Bing_is_ajax_list () { if (Isset ($_get["Action"]) && $_get["action"] = = "Ajax_list") return false; return trun; }

Bing_is_ajax_list () can determine if it is an AJAX request, return false for Ajax

Main loop:

The code is as follows	Copy Code
Wp_reset_query (); if (Have_posts ()): if (Bing_is_ajax_list ()) echo ' <ul class= ' postlist ' > '; while (Have_posts ()): The_post (); Article style, a function I used Bing_postlist_li (); Endwhile; if (Bing_is_ajax_list ()) echo ' </ul> '; Echo ' <div class= ' nextpage > '; Next_posts_link ("); Echo ' </div> '; endif

Finally remember to use Bing_is_ajax_list () to judge, let false (Ajax request) when the inclusion and the article List of the UL tag itself to remove, load only a bunch of Li

Page scroll to bottom automatic Ajax get article