jquery Infinite Scroll Implementation mouse scrolling automatic loading picture (Baidu picture loading)

Infinite Scroll is a way to dynamically load content, and it is common in social applications, such as Sina Weibo, to automatically load content that needs to be read when the page scrolls to the bottom.

WordPress.com already support this function, but own host's WordPress needs to add through the plug-in or the code, first introduces the plug-in method.

JetPack
If you use the Jetpack by WordPress.com plug-in, it takes a simple piece of code to turn on the infinite Scroll feature, which Jetpack has already integrated.

Infinite Scroll
Install infinite-scroll WordPress plug-ins directly, if you use the default theme or some well-known themes, as long as the plugin can be opened to obtain infinite Scroll function. If you write your own theme, you need to set up, completely do not understand the HTML words may be difficult, the need to set the content in the third section will be mentioned.

Do not use Plug-ins
The following methods are from WordPress theming.

1. Download infinite scroll Zip compression package, locate the Jquery.infinitescroll.min.js file in the root directory, and put it under the theme JS directory.

2. Choose an AJAX loader picture as the loading display of the picture, placed in the theme of the images directory.

3. Register and load the scripts required for infinite scroll, and place the following code in the functions.php of the topic

code is as follows

copy code

/**  * Load javascripts used by the theme  */ function custom_t Heme_js () {     wp_register_script (' <span style= "color: #DD4B39" >infin</span>ite_ Scroll ', Get_stylesheet_directory_uri (). '/js/jquery.<span style= ' color: #DD4B39 ">infin</span>itescroll.min.js", Array (' jquery '), NULL, true);     if (!is_singular ()) {         wp_enqueue_script (' < Span style= "COLOR: #DD4B39" >infin</span>ite_scroll ");    } } Add_action (' wp_enqueue_scripts ', ' custom_theme_js ');

4. Initialize infinite Scroll, here need you to understand HTML, here we want to find some relevant CSS selector, in order to continue to complete the code.

URL of img:ajax loader gif picture
Nextselector: Can select the CSS for the next page (Previous Post) Link element selector
Navselector: CSS selector containing the elements of the previous page/next page link
Itemselector: CSS selector that contains elements for each post content
ContentSelector: CSS selector containing container elements of all articles

The code is as follows

Copy Code

/** * <span style= "color: #DD4B39" >infin</span>ite Scroll */ function Custom_infinite_scroll_js () { if (!is_singular ()) { ?> <script type= "Text/javascript" > JQuery (document). Ready (function () { /** * Customize the previous navitation menu */ var <span style= "color: #DD4B39" >infin</span>ite_scroll = { Loading: { IMG: "<?php echo Get_stylesheet_directory_uri ();? >/images/ajax-loader.gif", Msgtext: "<?php _e (' Loading ' next set of posts ... ', ' tt_child ');?>", Finishedmsg: "<?php _e (' all posts loaded. ', ' tt_child ');?>" }, Nextselector: "#nav-below. Nav-previous a", Navselector: "#nav-below", Itemselector: "article", ContentSelector: "#content" }; JQuery (<span style= "color: #DD4B39" >infin</span>ite_scroll.contentselector). <span style= "COLOR: # Dd4b39 ">infin</span>itescroll (<span style=" color: #DD4B39 ">infin</span>ite_scroll); }); </script> <?php } }

If you use the infinite scroll plug-in is always error, most of these selector are not found right, only to find the class to let the code work.

Note: The above code uses Get_stylesheet_directory_uri to get the path, and if you need a resource in parent theme, replace it with Get_template_directory_uri.