How to realize infinite scrolling and loading data on PHP+InfiniteScroll web pages

This article mainly introduces "how to achieve infinite scrolling loading data on PHP+InfiniteScroll web pages". In daily operation, I believe that many people have doubts about how to achieve infinite scrolling loading data on PHP+InfiniteScroll web pages. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to achieve infinite scrolling loading data on PHP+InfiniteScroll web pages". Next, please follow the editor to study!

Implementation principle: when the scroll bar is a certain length from the bottom of the page, send the number of pages to the background and get the data.

First of all, we put 10 pieces of data on the page, that is, the first page, each of which is a p tag:

1. PHP generates image verification code

2. JQuery realizes table moving up, down, and top.

3. Cookie plug-in based on jQuery

4. JQuery imitates Taobao picture magnifying glass plug-in imagezoom

5. Simple jQuery commodity attribute selection form

.

Then we put in the navigation selector # pages and the next page # next,.loading.

next page

Then we introduce the jQuery library, debug.js (debugging), and the jquery.infinitescroll.js plug-in and js code:

Infinitescroll ({loading: {msgText: ", img:" images/loading.gif ", finishedMsg:'no new data', selector: '.loading' / / loading selector}, navSelector:" # pages ", / / navigation selector) Will be hidden nextSelector: "# next", / / the selector containing the link to the next page itemSelector: "p", / / the option you are about to retrieve (content block) debug: true, / / enable debugging information If enabled, you must introduce debug.js dataType: 'html',// format to be consistent with itemSelector maxPage: 5 dagger / maximum number of pages loaded / / animate: true, / / whether the page is animated when new data is loaded. By default, there is no extraScrollPx: 150, / / the scroll bar starts loading when how many pixels away from the bottom. Default is 150 / / bufferPx: 40, / / display time of loading information. The longer the time is, the shorter the display time of loading information is. ErrorCallback: function () {/ / callback function after loading data}, path: function (index) {/ / get the next page method return "page.php?p=" + index },}, function (newElements, data, url) {/ / callback function / / console.log (data); / / alert (url);}); at this point, the study on "how to implement unlimited scrolling data on PHP+InfiniteScroll pages" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!