leafoftree / svelte-lazy Goto Github PK

View Code? Open in Web Editor NEW

137.0 4.0 15.0 1.15 MB

A svelte component to lazyload any content including images

License: The Unlicense

JavaScript 31.17% HTML 1.25% Svelte 67.58%

svelte lazy lazyload

svelte-lazy's Introduction

svelte-lazy

A svelte component to lazyload any content including images. Demo on svelte.dev/repl.

Installation

npm i svelte-lazy

For sapper server-side rendering which requires using external components, install it to devDependencies:

npm i -D svelte-lazy

Usage

<script>
  import Lazy from 'svelte-lazy';
</script>

<Lazy height={300}>
  <img alt="" src="https://picsum.photos/id/412/200/300" />
</Lazy>

Props

height: Number|String. Default: 0 (px).
- Height of the component before load.
- Set a proper value to avoid scroll bounce. You can use the content height shown by the DevTools Inspector after loading.
keep: Boolean. Default: false.
- By default elements get unloaded after leaving view, set to true to keep all loaded ones after first appearance.
offset: Number. Default: 150 (px).
- Offset from the top of the component to the bottom of the viewport that triggers loading when in it.
placeholder: String|Component. Default: null.
- Placeholder before load.
placeholderProps: Object. Default null.
- Props for when using a component as a placeholder.
class: String. Default: ''.
- Additional class for the container div. It will be svelte-lazy ${class}.
fadeOption: Object. Default: { delay: 0, duration: 400 }.
- Option for the fade in transition. Set null to disable it.
onload: Function (node) => {}. Default: null.
- Function that is called when loaded.
resetHeightDelay: Number. Default: 0 (milliseconds).
- The delay to reset the component height to auto after loaded. Might be useful to wait for remote resources like images.

Changelog

v1.2.2

Support svelte 3 & 4
Load/unload when enters/leaves view

v0 -> v1.0

Adjust dom structure
Optimize image loading

Life cycle

            enter viewport  / no image                 -> loaded
not loaded  -------------->
                            \ with image -> load event -> loaded
                                                |
                                                |
            show placeholder                    |     show content

DOM structure

Before load

<div class="svelte-lazy ${class}">
    <div class="svelte-lazy-placeholder">...</div>
</div>

After load

<div class="svelte-lazy ${class}">
    <div class="svelte-lazy-content">...</div>
</div>

Development

git clone https://github.com/leafOfTree/svelte-lazy
cd svelte-lazy
npm i
npm start

Test

npm test

Publish

For maintenance, bump the version in package.json then run npm publish.

Refs

Based on sveltejs/component-template: A base for building shareable Svelte components

svelte-lazy's People

Contributors

Stargazers

Watchers

Forkers

essential-writer-codebase hoangpq dogagenc romaindurand unlocomqx jorgeadev mopholo vfrunza timscodebase alexdev404 aidang1 sebastianwestberg coffelius tostu letjek

svelte-lazy's Issues

Not latest version when installing with npm

When installing with npm, there is compatibility in package.json only with svelte 3, not reflecting the latest changes in git repo.

Not working with svelte-kit

Using it with svelte-kit, I get the following error:

Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
    at Function.assign (<anonymous>)
    at Placeholder.svelte:5:45
    at Object.$$render (/home/user/Projects/ari-motors-v2/node_modules/svelte/internal/index.js:1555:22)
    at eval (/node_modules/svelte-lazy/src/index.svelte:179:94)
    at Object.$$render (/home/user/Projects/ari-motors-v2/node_modules/svelte/internal/index.js:1555:22)
    at Image.svelte:48:14
    at Object.$$render (/home/user/Projects/ari-motors-v2/node_modules/svelte/internal/index.js:1555:22)
    at eval (/src/lib/core/BackgroundImage.svelte:15:84)
    at Object.$$render (/home/user/Projects/ari-motors-v2/node_modules/svelte/internal/index.js:1555:22)
    at PlatformSelection.svelte:19:28

Implementation: (Installed with yarn add -D svelte-lazy)

import Lazy from "svelte-lazy";

<Lazy height={100}>
  <img src="/images/logo.png" alt="logo" />
</Lazy>

Does return the same error with and without a placeholder.

Use it to lazy loading posts on scroll

Hello, thanks for the plugin. It's possible to use it to create an infinite scrolling homepage? For example , I have a list of posts fetched from a json file and I need to render them one after other in the index.svelte. Something like:

{#each posts as post}
		<Lazy>
			{@html post.content}
		</Lazy>
{/each}

Thanks.

add id to placeholder container

Hi,

I have a project where some buttons scroll to divs placed down the website. If I put the id prop in the slot that is passed inside Lazy it will not exist when the button is clicked because rendering didn’t happen yet.

I propose to have a prop in Lazy for passing the id and apply it to the placeholder instead, in theory it should scroll to the placeholder position and render the content.

Shouldn’t be too difficult, I can make a PR let me know if this sounds ok.

Uncaught TypeError

I am seeing this in the console in Chrome while in use, and resizing the window:

Uncaught TypeError: e.target.getBoundingClientRect is not a function

Images are still lazy loaded correctly though. I was wondering if this was just my setup, so I tried it on the demo and resizing the browser window in Chrome produces the same error.

Svelte Routify - Components don't load on page change.

Using Routify, components don't load on new pages until scroll has been triggered.

Lazy not working with Sapper

HI, this is a great plugin ! It works well if I "browse" to a page(client fetch) but if I refresh the page (preload /ssr) then the image doesn't appear - only when I start moving the mouse. Not sure what the SEO impact will be ? I'm guessing the goolge-bot doesn't move a cursor ?

I've installed with -D and my package.json file looks like this:

 "devDependencies": {
...
"svelte-lazy": "^0.1.11",
...

Spinner instead of fade

Is there a way to use a custom spinner image / component in place of a fade?

Browser can be overloaded when user scrolls quickly trough long list

I'm working on an application that shows list of items. Each item is a complex component and it took some time to render. Also in list could be from several hundred to cca 5000 items. If user scrolls slowly or use filters to find specific items, all works correctly.

But when user scrolls quickly or drag scrollbar and move it quickly to the middle or end of the list, browser triggers generation of all items between start and final position. That could mean rendering of hundred or thousand items at once. It can take several minutes and page stays blank till generation finish. User has to wait.

Would be nice to have a way, how to postpone rendering. E.g.: add a small delay and check again if item is still visible. If not, cancel rendering for this time.

AS IS:
When user do a quick scroll, all items between start and final position are rendered, even most of items stays hidden.

TO BE:
When user do a quick scroll, only items, where he stops, are rendered.

Missing export warning on Vite

Hi,
I encountered the following warning when compiling with Vite (5.0.10).

11:41:41 AM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition

Thank you for your help :)