Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Based on JQuery to automatically load more information when scrolling to the bottom of the page_jquery

Based on JQuery to automatically load more information when scrolling to the bottom of the page_jquery

WBOY

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

Original

983 people have browsed it

Key code:

Copy code The code is as follows:

var stop=true; 
$(window) .scroll(function(){ 
 totalheight = parseFloat($(window).height()) parseFloat($(window).scrollTop()); 
 if($(document).height() < = totalheight){ 
 if(stop==true){ 
 stop=false; 
 $.post("ajax.php", {start:1, n:50},function(txt){ 
                                                                                                                      . 
 



HTML: 

Copy code

The code is as follows:

Loading. ..

The implementation method is to compare the total height of the page and the scroll height to determine whether it has reached the bottom. If it reaches the bottom, read more content through ajax, and use before to insert it before Loading. 
The stop parameter takes into account the time consuming of ajax reading and prevents events from being triggered multiple times during an ajax reading process, resulting in multiple loading of content. 

Related labels：

autoload

source：php.cn

Previous article：Modify label transparency in IE and FF browsers_javascript skills Next article：js array operations pop, push, unshift, splice, shift_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn