Correct the infinite scroll issue in Envira Gallery

Correct the infinite scroll issue in Envira Gallery

Date
May 11, 2016
Tags
FE Development
Envira Gallery is a great wordpress plugin and we love it a lot because of the lightroom add-on. If you are using lightroom as your photo processing workflow, you will love that feature. It synchs your wordpress album with your lightroom collection. Nothing can be more time-saving than that. However, their current infinite scroll issue is not pleasant for everyone.
notion image
Envira Gallery has an pagination plugin which is great for big album. By dividing your album to different pages, that will reduce the load time. They have also introduced the lazy loading feature which will automatically load the next page when the user has scrolled to the end of the current page.
That’s a great feature but it is not implemented in a good way. The current implementation by Envira is the next page will only load when users have reached the pagination. That makes the infinite scroll not smooth. A better implementation would be the next page should start to load way before it enters the viewport.
If you want the ajax load/lazy load to be triggered early before users reach the pagination, there is a simple fix. Go to your envira plugin directory and look for enviro-pagination.js. You can probably find that in the directory /public_html/wp-content/plugins/envira-pagination/assets/js/
Once you are there, add -2000 in the statement below. That will trigger the loading 2000px before user scroll to the pagination.
if( $( window ).scrollTop() &gt;= $( envira_pagination_container ).offset().top <span style="color: #ff0000;">- 2000</span> + $( envira_pagination_container ).outerHeight() - window.innerHeight ) {