svelte-lazy - npm Package Compare versions

svelte-lazy

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.3 to 1.0.4

package.json

		@@ -6,7 +6,9 @@ {
		"main": "index.js",
		"version": "1.0.3",
		"version": "1.0.4",
		"repository": "leafOfTree/svelte-lazy",
		"license": "UNLICENSE",
		"scripts": {
		"start": "rollup -c ./test/rollup.config.js -w",
		"test": "npm run test-build && node test/auto/run",
		"test": "npm run test-build && npm run test-run",
		"test-run": "node test/auto/run",
		"test-build": "rollup -c ./test/auto/rollup.config.js",
		@@ -13,0 +15,0 @@ "build": "rollup -c",

README.md

		# svelte-lazy [![Build Status][1]][2] [![npm version][3]][4]

		A svelte component to lazyload any content including images.
		A svelte component to lazyload any content including images.

		<p align="center">
		<img alt="demo image" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/HEAD/svelte-lazy.gif" width="300" height="300" />
		<img alt="demo image" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/HEAD/svelte-lazy.png" width="300" />
		</p>
		@@ -13,3 +13,3 @@

		For sapper server-side rendering and [Using external components](https://github.com/sveltejs/sapper-template#using-external-components), install it to `devDependencies`:
		For sapper server-side rendering and [using external components][6], install it to `devDependencies`:

		@@ -19,2 +19,3 @@ npm i -D svelte-lazy
		## Usage

		```html
		@@ -30,10 +31,16 @@ <script>

		## `<Lazy>` props
		[Demo on svelte.dev/repl][5].

		- `height: Number\|String` Default: `0`. Height of the placeholder before the component is loaded. Set a proper value to avoid scroll bounce.
		## Props

		- `offset: Number` Default: `150`. Offset to the bottom of viewport that triggers loading when the component is in the scope.
		- `height: Number\|String` Default: `0`. Height of the component before load.

		Set a proper value to avoid scroll bounce. One way is to use the content height which can be mensured by the inspector in the devTool after load.

		- `offset: Number` Default: `150`. Offset to the bottom of the viewport that triggers loading when the component is in the scope.

		> The Number value uses `px` as unit.

		- `placeholder: String\|Component` Default: `null`. Placeholder before load.

		- `class: String` Default: `''`. Additional class for the container div. It will be `svelte-lazy ${class}`.
		@@ -43,8 +50,6 @@

		- `onload: Function (node) => {}` Default: `null`. Fucntion that is called when the component is loaded.
		- `onload: Function (node) => {}` Default: `null`. Fucntion that is called when loaded.

		- `placeholder: String\|Component` Default: `null`. Placeholder before the component is loaded.
		- `resetHeightDelay: Number` Default: `0` (milliseconds). Delay to reset the component height to `auto` after loaded. Might be useful to wait for remote resources like images.

		- `resetHeightDelay: Number` Default: `0` (milliseconds). Delay to reset the component height to `auto` after it is loaded. Might be useful for remote resources like images to load first.

		## Changelog
		@@ -83,6 +88,2 @@

		## Demo

		See [demo on svelte.dev/repl](https://svelte.dev/repl/6d7714fa3cce4909af6c6d187271e0a1?version=3.6.10).

		## Development
		@@ -103,1 +104,3 @@
		[4]: https://www.npmjs.com/package/svelte-lazy
		[5]: https://svelte.dev/repl/6d7714fa3cce4909af6c6d187271e0a1?version=3.6.10
		[6]: https://github.com/sveltejs/sapper-template#using-external-components

Fixed alerts

Improved metrics