Lazy Load List

Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists.

Rendering large lists makes the first load slow especially if items contain images, so this package split the list to small lists then it renders them one by one when scrolling to the end of the list..

you can notice the deference here:

loading performance deference

Demo

you can find the source code of examples in examples folder

Features

  • Fast Loading 🚀
  • Lightweight package
  • Better user experience
  • Supports most loved JS frameworks

Supported Frameworks

| svelte logo | Svete js     | ✅
| svelte | Vue js (2,3) | ✅
| svelte | React js     | coming soon..

Installation

install the package using npm or yarn:

install using npm

$ npm i lazy-load-list

or using yarn

$ yarn add lazy-load-list

Usage

⚠ you must wrap the list by div and specify the height and width in the wrapper div.

  • svelte logo svelte js:

import LazyList from 'lazy-load-list/svelte'

<div  class="container">
	<LazyList
		data={colors}
		itemsPerRender={15}
		containerClasses="list"
		defaultLoadingColor="#222"
		let:item={item}
	>
		<h1>{ item }<h1>
	</LazyList>
</div>
  • svelte vue js:

<div class="container">
	<LazyList
		:data="items"
		:itemsPerRender="15"
		containerClasses="list"
		defaultLoadingColor="#222"
	>
		<template v-slot="{item}">
		    <h1>{{ item }}<h1>
		</template>
	</LazyList>
</div>

// script
import LazyList from 'lazy-load-list/vue'
..
components: { LazyList } // don't forget to define it in the components

Props

prop description required default value
data the item array yes []
itemsPerRender items to be rendered per load yes 3
containerClasses list container classes for CSS no
defaultLoading to show the default loading or not no true
defaultLoadingColor color of the default loading no ‘#18191A’

GitHub

View Github