svelte-lazy - npm Package Compare versions

Comparing version 0.1.11 to 0.1.12

index.js

@@ -908,9 +908,12 @@ (function (global, factory) {
     function getExpectedTop(e, offset) {
-      let height;
+      const height = getContainerHeight(e);
+      return height + offset;
+    }
+
+    function getContainerHeight(e) {
       if (!e || e.target === document) {
-        height = window.innerHeight;
+        return window.innerHeight;
       } else {
-        height = e.target.getBoundingClientRect().bottom;
+        return e.target.getBoundingClientRect().bottom;
       }
-      return height + offset;
     }
@@ -955,3 +958,3 @@
         duration: 400, 
-      }, onload = null, placeholder = null } = $$props;
+      }, resetHeightDelay = 0, onload = null, placeholder = null } = $$props;
 
@@ -1002,6 +1005,4 @@ let loaded = false;
       function resetHeight(node) {
-        const wait = fadeOption 
-          ? fadeOption.delay + fadeOption.duration + 500 
-          : 500;
-        setTimeout(() => node.style.height = 'auto', wait);
+        // Add delay for remote resources like images to load
+        setTimeout(() => node.style.height = 'auto', resetHeightDelay);
       }
@@ -1015,2 +1016,3 @@
     		if ('fadeOption' in $$props) $$invalidate('fadeOption', fadeOption = $$props.fadeOption);
+    		if ('resetHeightDelay' in $$props) $$invalidate('resetHeightDelay', resetHeightDelay = $$props.resetHeightDelay);
     		if ('onload' in $$props) $$invalidate('onload', onload = $$props.onload);
@@ -1025,2 +1027,3 @@ if ('placeholder' in $$props) $$invalidate('placeholder', placeholder = $$props.placeholder);
     		fadeOption,
+    		resetHeightDelay,
     		onload,
@@ -1038,3 +1041,3 @@ placeholder,
     		super();
-    		init(this, options, instance, create_fragment, safe_not_equal, ["height", "offset", "fadeOption", "onload", "placeholder"]);
+    		init(this, options, instance, create_fragment, safe_not_equal, ["height", "offset", "fadeOption", "resetHeightDelay", "onload", "placeholder"]);
     	}
@@ -1041,0 +1044,0 @@ }

package.json

@@ -6,6 +6,7 @@ {
   "main": "index.js",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "repository": "leafOfTree/svelte-lazy",
   "scripts": {
-    "test": "rollup -c ./test/rollup.config.js -w",
+    "start": "rollup -c ./test/rollup.config.js -w",
+    "test": "npm run start",
     "build": "rollup -c",
@@ -12,0 +13,0 @@ "prepublishOnly": "npm run build"

README.md

 # svelte-lazy
 
+A svelte component to lazyload any content including images.
+
 <p align="center">
@@ -7,4 +9,2 @@ <img alt="demo image" src="https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/HEAD/svelte-lazy.gif" width="300" height="300" />
 
-A svelte component to lazyload any content including images.
-
 ## Install
@@ -43,2 +43,4 @@
 
+- `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.
+
 - `onload: Function (node) => {}` Default: `null`. Fucntion that is called when the component is loaded.
@@ -50,13 +52,11 @@
 
-
 ## Development
 
+    git clone https://github.com/leafOfTree/svelte-lazy
+    cd svelte-lazy
     npm i
-    npm run test
+    npm start
 
-    # Open test/index.html or start a local server
-    serve test
-
 ## Refs
 
 Based on [sveltejs/component-template: A base for building shareable Svelte components](https://github.com/sveltejs/component-template)

No alert changes

Improved metrics

Total package byte prevSize

63530

increased by0.84%

Lines of code

1856

increased by0.22%

No dependency changes