top of page

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


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");


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

1 Comment

Unknown member
Aug 26, 2020

Hi! I’m not sure if you take questions here :)

I tried this implementation on my new website and it works like a charm. But once I click on a repeater item, say a product to visit its detailed page and navigate back to thepage with the repeater, I have to start scrolling from the top, afresh. Is there any fix for this? Many thanks.



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.

bottom of page