Jquery Infinite Scroll automatically loads images with mouse scrolling (Baidu image loading)

Recently, we will find that Baidu image search is no longer paging, And we will scroll the mouse to automatically load images. Next I will introduce you to the implementation of this image loading effect.

Infinite Scroll is a kind of dynamic content loading method. When a webpage scrolls to the bottom, it automatically loads the content that needs to be viewed by page turning. It is very common in social applications, such as Sina Weibo.

WordPress.com already supports this function, but WordPress of its host needs to be added through plug-ins or code. first introduce the plug-in method.

JetPack
If you use the Jetpack by WordPress.com plug-in, you only need a simple piece of code to enable the infinite scroll function. jetpack has already integrated this function.

Infinite Scroll
Install the Infinite-Scroll WordPress plug-in directly. If you use the default theme or some well-known theme, you only need to enable the plug-in to obtain the infinite scroll function. If it is a self-written topic, you need to set it up. If you do not understand HTML at all, it may be difficult. The content to be set will be mentioned in section 3.

Do not use plug-ins
The method described below is WordPress Theming.

1. Download the infinite scroll zip package, find the jquery. infinitescroll. min. js file in the root directory, and put it in the js directory of the topic.

2. Select an ajax loader image as the image displayed during loading and place it in the images directory of the topic.

3. Register and load the script required by infinite scroll, and put the following code in the topic's functions. php.

 

The Code is as follows:

Copy code

/** * Load javascripts used by the theme */ Function custom_theme_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 ','m M _ theme_js ');

4. initialize infinite scroll. here you need to understand HTML. here we need to find some related css selector to continue to complete the code.

Img: url of the ajax loader GIF Image
NextSelector: Specifies the css selector that can be used to select the link element of the next page (Previous Post ).
NavSelector: css selector that contains elements linked to the previous or next page
ItemSelector: css selector that contains the elements of each post
ContentSelector: css selector that contains the container element 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 the next set of posts... ', 'tt _ child');?> ", FinishedMsg: "<? Php _ e ('all posts loaded. ', 'tt _ child');?> " }, NextSelector: "# nav-below. nav-previous ", 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 an error always occurs when using the Infinite Scroll plug-in, most of them are that the selector is not correct. Only the correct class can make the code work.

Note: The above Code uses get_stylesheet_directory_uri to obtain the path. If you need resources in parent theme, replace them with get_template_directory_uri.