Auto Load Content on Scroll to create a Lazy Loading Effect

Updated: Sep 14, 2020


Tutorial Video

Learn how to auto load content on scroll to create a lazy loading effect on your Wix website using Corvid. Our example uses Wix Stores app to give our products index section a unique loading style that is very popular on websites such as AliExpress. This method allows the to page to progressively load content on page scroll instead of clicking a load more button or pagination element. This is a great method to create an infinite scroll effect if you have many items on a database so that you can save on load time but limiting the initial number of items to display and slowly load a little more at a time as the person scrolls down the page.


Follow Along #1

Tutorial Page

https://codequeen.wixsite.com/lazy-loading


 

Good to Know #1

Required Elements


  • Any database collection

  • GIF / animated image hidden on load ; To attach to Strip

  • 1 Strip with onViewportEnter

 

Good to Know #2

Elements used in this tutorial

  • Dataset connected to Wix Stores Products collection with View Only mode ; Limit to 3 items

  • animated GIF hidden on load

  • 1 Strip with onViewportEnter


 

Good to Know #3

The Code for Page



export function viewStrip_viewportEnter(event) {

 $w("#loadmore").show();  //This is your GIF or animated image
 $w("#dataset1").loadMore() //This is your dataset
  .then(() => {
   $w("#loadmore").hide(); //This is your GIF or animated image

   console.log("Done loading more data");
  });
}
    
 

Author

by Code Queen


Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.


Online Booking: Discovery Session

Contact Form: Send project details

1,439 views1 comment