Auto Load Content on Scroll to create a Lazy Loading Effect

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

Services world wide

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