image-loader-spinner - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

dist/index.js

@@ -53,4 +53,19 @@ "use strict";
   e.target.removeAttribute("spinner");
-  if (e.target.displayAfterLoad)
-    e.target.style.display = "block";
+  if (e.target.displayAfterLoad) {
+    const fadeIn = e.target.getAttribute("fadein");
+    if (fadeIn != null && fadeIn == "true") {
+      const maxOpacity = e.target.style.opacity == "" ? 1 : parseFloat(e.target.style.opacity);
+      e.target.style.opacity = 0;
+      e.target.style.display = "block";
+      const interval = window.setInterval(() => {
+        if (parseFloat(e.target.style.opacity) >= maxOpacity)
+          return window.clearInterval(interval);
+        const opacityImage = parseFloat(e.target.style.opacity);
+        e.target.style.opacity = opacityImage + 0.05;
+        if (parseFloat(e.target.style.opacity) > maxOpacity)
+          e.target.style.opacity = maxOpacity;
+      }, 1e3 / 20);
+    } else
+      e.target.style.display = "block";
+  }
 }
@@ -74,4 +89,5 @@ function imageError(e) {
   document.body.querySelectorAll("img").forEach((image) => {
+    const spinnerAttribute = image.getAttribute("spinner");
     const parentElement = image.parentElement;
-    if (image.getAttribute("spinner") == null || image.getAttribute("loading") != null || parentElement == null)
+    if (spinnerAttribute == null || spinnerAttribute != "true" || image.getAttribute("loading") != null || parentElement == null)
       return;
@@ -78,0 +94,0 @@ image.setAttribute("loading", "true");

package.json

 {
   "name": "image-loader-spinner",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Use a spinner until your images are completely loaded in the DOM",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -59,3 +59,3 @@
 
-        <img src="assets/images/image.png" spinner="true" /> <!-- Show spinner container with defaultSize -->
+        <img src="assets/images/image.png" spinner="true" fadein="true"/> <!-- Show spinner container with defaultSize and fadeIn animation -->
 
@@ -71,4 +71,9 @@ <img src="assets/images/image.png" spinner="true" size="150px" /> <!-- Show spinner container with widthSize 150px, heightSize 150px -->
 
-Add the attribute spinner for set the loading spinner instead an empty image.<br />
-The attribute size is the size of your spinner_container div.<br />
+Add the attribute **spinner** to **true** for set the loading spinner instead an empty image.<br />
+The attribute **size** is the size of your spinner_container (by default is set to 100 or your default value configuration).<br />
+The attribute **wsize** is the width size of your spinner_container<br />
+The attribute **hsize** is the height size of your spinner_container<br />
+The attribute **fadein** will display your image with fadeIn animation to your opacity value (20fps)<br />
+Values can be set to pixels, percentages, and viewports.<br /><br/>
+
 The spinner will be half the size of your container.<br />
@@ -75,0 +80,0 @@ Your spinner will be display as :

No alert changes

Improved metrics

Total package byte prevSize

39562

increased by14.27%

Lines of code

312

increased by11.43%

Number of lines in readme file

113

increased by4.63%

No dependency changes