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,177 views1 comment

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.