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