Code Queen

Jul 26, 20201 min

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

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

    17521
    13